路由嵌套、传参

一，简易路由
1)npm i vue-router@3
2)创建components文件夹，name
3)创建router文件夹 index.js
创建并暴露一个路由器

    export default new VueRouter({
        routes:[
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home
            }
        ]
    })

4)main.js

import VueRouter from 'vue-router'
import router from './router/index'
// export default 中加上router

5)修改router-link active-class to
二，嵌套路由
1)除了一级路由，路径都不要加/，vue自动加

2. router-link中 to 需要携带一级路由的路径
   三，路由传参：
   1)params,
   2)query
   跳转路由并携带query参数，to的字符串写法 (不香)

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

跳转路由并携带query参数，to的对象法

<router-link :to="{ 
 path:'/home/message/detail',
 query:{
 id:m.id,
 title:m.title
 }  
}"> 
 {{m.title}}
</router-link>

跳转路由携带参数params

<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

跳转路由并携带query参数，to的对象写法

<router-link :to="{
 // 此处不能用path，必须用name  不可
 path:'/home/message/detail', 
 name:'xijie',
 params:{
 id:m.id,
 title:m.title 
 }
}">
 {{m.title}}
</router-link>

四、props
// props的第一种写法，值为对象，该对象种的所有key-value都会以props的形式传给Detail组件
props:{a:1,b:‘hello’}
detail组件中：props:[‘a’,‘b’],

// props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
props:true

// props(KaTeX parse error: Expected '}', got 'EOF' at end of input: …n { id:route.query.id,
title:$route.query.title
}
}