路由传参

PS:总结工作中遇见的路由传参方法

//router/index.js
{
    path: 'homePath',
    name: 'homeName',
    component: resolve => require(['@/page/home/index'], resolve),
},

不打开新窗口

1.query方式

this.$router.push({ name: 'homeName', query: { id: 1 }}) 
this.$router.push({ path: 'homePath', query: { id: 1 }})

let name = 'test'
//to字符串
<router-link :to="`/homePath?id=1&name=${name}`">跳转</router-link>

//to对象
<router-link :to="{
    name:'homeName',
    query:{
        id:1,
        name:'test'
    }
}">
跳转
</router-link>

2.params方式

注意：params只能使用name，不能使用path

this.$router.push({ name: 'homeName', params: { id: 1 }}) 
let name = 'test' 
//to字符串 
<router-link :to="`/homePath?id=1&name=${name}`">跳转</router-link>

//to对象
<router-link :to="{
    name:'homeName',
    params:{
        id:1,
        name:'test'
    }
}">
跳转
</router-link>

获取传参

this.$route.query 
this.$route.params

打开新窗口

1. window.open

//只能用query，params拿不到参数
const { href } = this.$router.resolve({
    path: "homePath",
    query: {
        id: 1,
        name: 'test'
    }
});
 
window.open(href, "_blank");