Vue 0基础学习路线（14）—— 图解深度详述Vue路由组件和vue-router、创建路由对象、router-view、router-link组件及详细案例（附详细案例代码解析过程及版本迭代过程）

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

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方法，给每一个组件注册两个属性

1. $router 整个路由对象
2. $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组件，类似a标签。

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

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

其在页面上默认生成的是a标签。

\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组件功能非常强大，除了默认a标签，还可以指定为其他类型的标签，如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

有的时候布局并不是a、或者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

（后续待补充）