vue路由

路由就是对应关系

当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

router-link

创建链接时使用自定义组件router-link，而不是a标签，这可以使Vue Router在不诚信加载页面的情况下更改URL，处理URL的生成以及编码

router-view

router-view 将显示与 url 对应的组件

 <router-link to="/about">关于</router-link>
 <router-view></router-view>

嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由

要将组件渲染到嵌套的 router-view 中，我们需要在路由中配置 children

通过children属性声明子路由规则

在路由模块中，导入需要的组件，并使用children属性声明子路由规则

import Tab1 from '@/components/tabs/tab1.vue'
import Tab2 from '@/components/tabs/tab2.vue'
const router =new VueRouter({
  routes:[
    {
      path:'/about',
      component:About,
      children:[
      {path:'',component:Tab1},
      {path:'tab2',component:Tab2}
    ]}
  ]
})

动态路由

当我们需要将给定匹配模式的路由映射到同一个组件上，便需要用到动态路由
动态路由是指把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性

    //路由中的动态参数以: 进行声明，冒号后面的使动态参数
    {path:'/movie/:mid',component:Movie,props:true}、
    
    //将以下3个路由规则，合并成了一个，提高了路由规则的复用性
    <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>

当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

<div>User {{ $route.params.mid }}</div>