vue中路由携带参数

1、query

一、query参数
<router-link to='/home/message?id=555&message="hhhh"'>
    
重要：如何在路由中携带js的变量。
<!--路由跳转携带query参数，to的字符串写法-->
<router-link :to='`/home/message?id=${m.id}&mes=${m.name}`'>
    1、给to加v-bind,简写是冒号  :
    2、给路由加模板字符串
    3、给要传递的数据用 &{} 包裹  
    
<!--路由跳转携带query参数，to的对象写法-->
<router-link :to="{
    path:'/home/message',
    query:{
        id:m.id,
        title:m.name
    }
}"> </router-link>

如何获取query参数：
在路由对应的组件中：
在

mounted(){
//查看route中的数据
 console.log(this.$route)

}

2、params 未整理

1、在路由配置中进行配置：index.js，要先声明进行占位

routes:[

        {

        name:'home',

        path:'/home',

        component:Home,

        children:[

        name:'message',

        path:'message/:id/:name',  //在配置路由规则中，声明携带的参数，占位符

        component:Message,

        ]

        }

]

  

2、使用，在路由跳转中携带数据

模板字符串携带：

<router-link :to='`home/message/${data.id}/${data.name}/`'> </router-link>

对象方式携带：

<router-link :to="{

name:'message',  //这里必须是路由的别名，路由配置中的name属性是对应的数据

params:{

        id:data.id,

        name:data.name

}

}">  </router-link>

3、在组件中如何获取到随路由携带的数据？

在$route.params中就可以拿到数据