文章目录

1. vue-router重点提炼
2. 路由
3. vue-router 的安装
4. Vue.use()
5. 创建路由对象
6. router-view 组件
7. 实例
- 7.1 example01
- 7.2 example02
- 7.3 example03
- 7.4 example04
- 7.5 example05
- 7.6 example06
- 7.7 example07
- 7.8 example08

1. vue-router重点提炼

vue-router
Vue.use()
new VueRouter(options)
options:
- mode
  - hash
  - history
- routes:[]
  - {path,name,component}

2. 路由

当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由。

路由：把 url 与应用中的对应的组件进行关联，通过不同的 url 访问不同的组件。

3. vue-router 的安装

npm i vue-router
// OR
yarn add vue-router

Vue 0基础学习路线（14）—— 图解深度详述Vue路由组件和vue-router、创建路由对象、router-view、router-link组件及详细案例（附详细案例代码解析过程及版本迭代过程）1. vue-router重点提炼2. 路由3. vue-router 的安装4. Vue.use()5. 创建路由对象6. router-view 组件7. 实例

4. Vue.use()

通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

5. 创建路由对象

通过 vue-router 提供的 Router 构造函数（类）创建路由对象，路由对象包含了当前使用的模式（hash、history）、路由信息（url 与组件的对应关系）等信息

import Router from 'vue-router';
import Home from './views/Home.vue';
import Home from './views/About.vue';

const myRouter = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

...,
  
new Vue({
  ...,
  router: myRouter
});

6. router-view 组件

配置了路由信息以后，我们还需要中页面（组件）中指定路由对应的组件出现的位置，当当前访问的 url 与某个路由信息匹配的时候，该组件就会出现在 router-view 组件所在的位置

// App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <hr>
    <router-view/>
  </div>
</template>

7. 实例

7.1 example01

目录设置与我们之前学习

React

的时候一样

src

下的

component

目录存放的是功能性组件

views

存放与路由有关的视图组件

router

单独存放路由组件

router

配置项 =

router

在路由里面会直接调用

use

方法，然后再调用

install

方法，执行

install

方法的时候就会查看有没有

router

配置项，如果有这个配置，就会把

router

注入到

vue实例

当中

关于

install

方法原理，上一篇小迪总结过来，就不再多说了。如有问题，请参考：Vue 0基础学习路线（13）—— 图解深度详述Vue脚手架和vue-cli、单文件组成、本地服务搭建、自定义脚手架配置及详细案例（附详细案例代码解析过程及版本迭代过程）

配合

VueRouter

的

install

方法，给每一个组件注册两个属性

$router 整个路由对象
$route 当前访问的路由匹配对象

import router from "./router"

index.js

可省略

router: router

属性同名可省略（

es6

语法） =>

router,

\app\src\main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

\app\src\views\Home.vue

<template>
    <div>
        Home
    </div>
</template>
 
<script>
    export default {
        name: "Home",
    }
</script>

设置路由主页

=> \app\src\router\index.js

import Home from '@/views/Home';

和

import About from '@/views/About';

=> 注意后缀

js

都是默认的，不用写，可以省略

第一步执行

VueRouter

的

install

Vue.use(VueRouter);

第二步创建一个具体的路由对象，该对象就是我们应用中需要使用到的路由相关配置

let router = new VueRouter

配置 =>

mode

'hash \ history'

routes

=> 数组类型 => 存放的每一个对象就是一组

url

与组件的对应关系，每一个对象中又有很多配置 =>

path

项 => 设定的

url

component

项 => 对应的组件

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from '@/views/Home';

Vue.use(VueRouter);

let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: Home
        }
    ]
});

export default router;

还需告诉视图 =>

App.vue

视图组件显示在什么地方

install

方法会自动给我们创建两个组件，其中之一是 =>

router-view

即满足当前

url

的路由组件将被显示在

router-view

的位置 <=> 这个有些类似我们之前学的动态组件的

component

属性

\test01\app\src\App.vue

<template>
  <div id="app">
    <h1>我的主页</h1>
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: 'App'
  }
</script>

\app\src\views\About.vue

<template>
    <div>
        About
    </div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

\app\src\router\index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from '@/views/Home';
import About from '@/views/About';

Vue.use(VueRouter);

let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
});

export default router;

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.65

Branch： branch05

commit description：a1.65（example01——路由组件的简单使用）

tag：a1.65

7.2 example02

路由也可配置

hash

模式

let router = new VueRouter({
    mode: 'hash', 
 
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
});

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.66

Branch： branch05

commit description：a1.66（example02——路由组件的简单使用-改成hash模式）

tag：a1.66

7.3 example03

简单实现导航切换

模式切换成

history

=> url上就不用了带

了。

let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
});

通过点击切换页面，利用

router-link组件

，类似

标签。

它与

react

中的概念类似，它实现不是跳转，而是触发和激活用户跳转的行为，它中间会拦截跳转。

拦截以后分析当前的地址，然后根据这个地址把对应的组件显示在

router-view

的位置。

其在页面上默认生成的是

标签。

\app\src\App.vue

<template>
  <div id="app">
    <h1>我的主页</h1>
    <div id="nav">
      <router-link to="/">Home</router-link>
      <span> | </span>
      <router-link to="/about">About</router-link>
    </div>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: 'App'
  }
</script>

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.67

Branch： branch05

commit description：a1.67（example03——简单实现导航切换）

tag：a1.67

7.4 example04

router-link组件

功能非常强大，除了默认

标签，还可以指定为其他类型的标签，如

button

按钮

<router-link tag="button" to="/">Home</router-link>
<span> | </span>
<router-link tag="button" to="/about">About</router-link>

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.68

Branch： branch05

commit description：a1.68（example04——简单实现导航切换-换成button按钮）

tag：a1.68

7.5 example05

实现选项卡切换后高亮

我们刚才观察切换按钮的

class

会多了很多内容，如果我们访问的当前

url

与当前

router-link

里的地址

url

是匹配的，会给当前自动生成的标签，加上这一堆

classs

，代表此时它是激活的状态。

这样做的目的，就是方便我们加样式。

\app\src\App.vue

<template>
  <div id="app">
    <h1>我的主页</h1>
    <div id="nav">
      <router-link tag="button" to="/">Home</router-link>
      <span> | </span>
      <router-link tag="button" to="/about">About</router-link>
    </div>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: 'App'
  }
</script>

<style>
  .router-link-active {
    color: red;
  }
</style>

但还存在问题，因为当前

/about

也是满足

/home

（为

‘/’

）的，因此我们切换

about

页面的时候，

home

也高亮了。

因此这时候是模糊匹配，而非精确匹配。我们可以将其设置为精确匹配。

<router-link exact tag="button" to="/">Home</router-link>
<span> | </span>
<router-link tag="button" to="/about">About</router-link>

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.69

Branch： branch05

commit description：a1.69（example05——简单实现导航切换-高亮切换）

tag：a1.69

7.6 example06

除此之外如果不想用这个属性做精确匹配，我们仔细观察激活状态给我们的class值：

router-link-exact-active router-link-active

<style>
  .router-link-exact-active{
    color: red;
  }
</style>

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.70

Branch： branch05

commit description：a1.70（example06——简单实现导航切换-高亮切换的第二种方式）

tag：a1.70

7.7 example07

同时路由组件中还可以嵌套标签

<router-link exact tag="button" to="/">
    <span> Home </span>
</router-link>
<span> | </span>
<router-link tag="button" to="/about">
    <span> About </span>
</router-link>

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.71

Branch： branch05

commit description：a1.71（example07——简单实现导航切换-同时路由组件中还可以嵌套标签）

tag：a1.71

7.8 example08

有的时候布局并不是

、或者

button

，而是

ul

和

li

<ul id="nav">
      <router-link tag="li" to="/">Home</router-link>
      <li> | </li>
      <router-link tag="li" to="/about">About</router-link>
    </ul>

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.72

Branch： branch05

commit description：a1.72（example08——简单实现导航切换-ul与li布局）

tag：a1.72

（后续待补充）

文章目录

1. vue-router重点提炼

2. 路由

3. vue-router 的安装

4. Vue.use()

5. 创建路由对象

6. router-view 组件

7. 实例

7.1 example01

7.2 example02

7.3 example03

7.4 example04

7.5 example05

7.6 example06

7.7 example07

7.8 example08

继续阅读

vue中父组件调用子组件的方法

Vue监视数据原理

vue项目：npm打包-S和-D区别：

vue滑动插件：vue-drag-verify

vue插件的使用

使用Vue自定义组件出现的错误

Vue+原生JS实现点击粘贴到剪贴板

vue时间段选择器实现的功能

VueX 做状态管理( state , mutations , getters , actions 概念)

vue 中英文切换

【GIT】git命令行代码提交流程及注意事项

Django项目实战——3—(图形验证码后端逻辑、短信验证码、短信验证码后端逻辑)1、图形验证码后端逻辑2、短信验证码3、短信验证码后端逻辑

vue3 transitionvue3 transition组件和vue2 transition组件

vue学习笔记day12 vue的生命周期

父子组件间传值的实现父子组件间传值的实现

手把手教你配置：Jenkins+Github+Webhook +Nginx自动化打包部署Vue项目