Vue 路由(vue-router)简单使用https://mp.csdn.net/mp_blog/creation/editor/123429114
0、路由的命名
const routes = [
{
path: '/user/:username',
name: 'user',
component: User
}
]
-
path与name都可以
- path是必须存在的
- 建议命名name,这样在多级路由中,书写更加方便
1、Query传参
//TODO 第一种方法
//最简单
<router-link active-class="active" :to="`/home/message/detailed?id=${m.id}&${m.title}`"> {{m.title}}</router-link>
//接收
<div>
<h4>消息ID:{{$route.query.id}}</h4>
<h4>消息内容:{{$route.query.title}}</h4>
</div>
//TODO 第二种方法
<li v-for="m in msgList" :key="m.id" class="list-group">
<router-link active-class="active" :to="{
name:'xq',
query:{
id:m.id,
title:m.title
}
}"> {{m.title}}
</router-link>
</li>
//接收
<div>
<h4>消息ID:{{$route.query.id}}</h4>
<h4>消息内容:{{$route.query.title}}</h4>
</div>
2、Params传参 (必须使用在router/index.js中配置的name,不可以使用path)
1、要在router/index.js 文件下面配置的path路径下添加
path: 'detailed/:id/:title',//:xx 代表占位符
//接收
<div>
<h4>消息ID:{{$route.params.id}}</h4
<h4>消息内容:{{$route.params.title}}</h4>
</div>
3、props传参
1、要在router/index.js 文件 对象下添加 props函数
props(route) {
return {
id:route.query.id,
title:route.query.title,
}