Vue Router（1）

写在前面

在上篇博客 前端路由 中是根据原生的 Web API 手动构建的前端路由器。在 Vue 框架中，Vue 官方有提供对应的路由管理器，就是 Vue Router。无论是哪种前端路由管理工具，实现思路基本是一致的。因此在学习 Vue Router 的使用方法时，应从 路由表、路由链接、路由内容等 进行记忆。

1. 是什么

Vue Router 是 vue.js 官方的路由管理器。

2. 基本用法

2.1 安装 vue-router 到项目中

安装：
yarn add vue-router
引入：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

2.2 定义路由表

const routes = [
  {path: '/a', component: A},
  {path: '/b', component: B}
]

2.3 创建 VueRouter 实例

const router = new VueRouter({
  routes,
  mode: 'history' //路由模式选择，默认是 hash
})

2.4 将路由注入应用

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

2.5 定义路由路口（a链接位置）

<router-link to="/a">go to A</router-link>
<router-link to="/b">go to B</router-link>

2.6 定义路由出口（内容展示位置）

<router-view></router-view>

2.7 定义默认路由和404路由

const routes = [
  //默认路由，匹配 /
  {path: '/', component: A},
  
  {path: '/a', component: A},
  {path: '/b', component: B},
  
  //使用通配符放在路由表最后匹配404路由
  {path: '*', component: NotFound}
]

3. VueRouter 实例的使用

将 VueRouter 实例 router 注入到 Vue 应用中后，VueRouter 内部做了一些操作，将 router 实例相关的信息定义在了 Vue 的原型上，以便于所有 Vue 组件内部都可以访问到 router 实例。

$router ：创建的路由实例，包含所有路由信息
$route：当前路由信息对象

4. 动态路由

在路由表中将 path 属性参数的前面加 :

const routes = [
  {path: '/', component: B},
  
  //动态路由
  {path: '/a/:id', component: A},
  
  {path: '/b', component: B},
  {path: '*', component: NotFound}
]

这样一来， /a/1 和 /a/2 都会显示组件 A

//A.vue
<template>
    <div>
        我是 A 组件的内容，我收到的参数为 {{$route.params.id}}
    </div>
</template>
<script>
export default {
    mounted(){
        console.log(this.$route.params.id)
    },
    watch: {
        $route(to, from){
            console.log(this.$router)
            console.log(`路由变了，从 ${from.params.id} 变到了 ${to.params.id}`)
        }
    }
}
</script>

5. 嵌套路由

Vue Router 是在每一个路由配置对象里添加了一个 children 属性，用于嵌套路由。使用方法如下：

const routes = [
  {path: '/', component: A, children: [
    {path: '', component: A0},
  ]},
  {path: '/a', component: A, children: [
  
    //匹配''空白字符是指在 url 为 /a 时 A.vue 中 RouterView 显示的内容
    {path: '', component: A0},
    
    {path: '1', component: A1},
    {path: '2', component: A2}
  ]},
  {path: '/b', component: B},
  {path: '*', component: NotFound}
]

//A.vue
<template>
    <div>
        我是 A 组件的内容
        <router-link  to="/a/1">go to A1</router-link>
        <router-link  to="/a/2">go to A2</router-link>
        <router-view></router-view>
    </div>
</template>