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
  }
]

1. path与name都可以

2. path是必须存在的
3. 建议命名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,

    }
                      

 

 Vue-Router 官网链接