【原创】Vue 路由传参

query 参数

传参

• 字符串写法

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

• 对象写法

<router-link
:to="{
path:'/home/message/detail'
query:{
id:'001',
title:'消息001'
}
}"
>跳转</router-link>

接收参数

$route.query.id
$route.query.title

params 参数

配置路由，声明参数

{
path:'/home',
component:'Home',
children:[
{
path:'news'
component:News
},
{
path:'message'
component:Message
children:[
{
name:'detail'
path:'detail/:id/:title' // 使用占位符声明 params 参数
component:Detail
}
}

传递参数

• 字符串写法：

<router-link :to='/home/message/detail/666/你好'>跳转</router-link>

• 对象写法：

<router-link
:to="{
name:'detail'
params:{
id:'001',
title:'消息001'
}
}"
>跳转</router-link>

注意：路由携带 params 参数时，若使用 to 的对象写法，不能使用 path 配置项，必须使用 name 配置项。

接收参数

$route.params.id
$route.params.title

路由的 props 配置

作用：让路由更方便地接收到参数。

{
name:'detail'
path:'detail/:id/:title' // 使用占位符声明 params 参数
component:Detail,
// 第一种写法，props 值为对象，该对象中所有的 key-value 的组合最终都会通过 props 传递给 Detail 组件
// props:{id:666,title:'hello'}
// 第二种写法，props 值为布尔值，如果为 true，则把路由所有收到的 params 参数通过 props 传给 Detail 组件
// props:true

// 第三种写法，props 为函数，该函数返回的对象中每一组 key-value 都会通过 props 传递给 Detail 组件
props(route){
return {
id:route.query.id
title:route.query.title
}
}
}

打开新页面

<router-link target="_blank" :to="{path:'/xxx'}"><el-link type="danger">xxx</el-link> </router-link>

let rd = this.$router.resolve({
path: "/xxx",
query: {
id: data.id,
cId: data.cId
}
});
window.open(rd.href, '_blank');},