多级路由（嵌套路由）

多级路由，顾名思义，就是一个路由中还有其他子路由，配置规则是在一个路由中使用children配置项

路由中的 replace

浏览器的历史记录模式有 push 和 replace 两种；push 是追加历史记录，而 replace 是替换当前历史记录。一般浏览器默认的历史记录模式是 push，在某些场景中我们不想让用户返回到跳转之前的页面，这时就可以使用replace模式。
开启replace模式：<router-link replace:true></router-link>
简化版：<router-link replace></router-link>

路由传参

Vue路由传参的方式有三种，分别是 query 传参，params 传参以及 porps 传参。下面我将逐一介绍各种传参方法：

query 传参

query传参的方式是在router-link中通过to属性进行传参的具体写法如下：
字符串写法：<router-link :to="/url?a=xxx&b=xxx">跳转</router-link>
对象写法：

<router-link 
:to = {
        path:'/url',
        query:{
            a:xx,
            b:xx
             }
     }
  >跳转<router-link>

接收query参数的方式是通过 this.$route.query 来实现

params 传参

params传参的方式也是在router-link中通过to属性进行传参的具体写法如下：
字符串写法：先在router配置文件中声明params参数，再使用to传参

router.js文件中
{
    path:'/home/:a/:b',//a,b为声明的params参数
    component:Home
}

.vue文件中
<router-link :to="/home/a要传的参数/b要传的参数>跳转</router-link>

对象写法：

<router-link
:to="{
        name:路由名,
        params:{
            a:xx,
            b:xxx
            }
     }"
 >跳转</router-link>

接收参数：this.$route.params

porps 传参

使用porps传参可以让路由组件更方便的收到参数。第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给目标组件
props：{a:xx,b:xx}
第二种写法：props为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给组件
props：true
第三种写法:props值为函数，该函数返回的对象中每一组key-value都会通过props传给组件

props(route){
    return{
        a：route.query.a,
        b:route.query.b
        
    }
}

总结

本文主要讲解了 vue 路由的相关知识，着重讲解了三种路由传参的方式，以及多级路由的相关知识。

前端笔记 -- Vue路由（二） | 青训营笔记

多级路由 （嵌套路由）