Vue 路由（vue-router）传值
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, }
