VUE路由跳转传递参数的⼏种⽅式1.跳转到新标签页
⽹上看到跳转到新标签页有两种⽅式：
第⼀种：
dofunc () {
let routeUrl = this.$solve({
path: '/abc',
query: {id : 22}
})
window.open(routeUrl .href, '_blank)
}
第⼆种：
<router-link target="_blank" :to="{path:'/abc',query:{id:'22'}}">跳转到新页⾯</router-link>
2. 参数传递
⽹上看到有四种⽅式：
1）通过动态路由⽅式
//路由配置⽂件中配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
react router路由传参//跳转时页⾯
var id = 1;
this.$router.push('/detail/' + id)
//跳转后页⾯获取参数
this.$route.params.id
2）通过query属性传值
//路由配置⽂件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
/
/跳转时页⾯
this.$router.push({
path: '/detail',
query: {
name: '张三'，
id: 1,
}
})
//跳转后页⾯获取参数对象
this.$route.query
3）通过params属性传值
/
/路由配置⽂件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页⾯
this.$router.push({
name: 'Detail',
params: {
name: '张三'，
id: 1,
}
})
//跳转后页⾯获取参数对象
this.$route.params
4）⼀种感觉满⾮主流的⽅式
function parseUrl(){
var url=location.href;
var i=url.indexOf('?');
if(i==-1)return;
var querystr=url.substr(i+1);
var arr1=querystr.split('&');
var arr2=new Object();
for  (i in arr1){
var ta=arr1[i].split('=');
arr2[ta[0]]=ta[1];
}
return arr2;
}
var v = parseUrl();//解析所有参数
alert(v['id']);//就是你要的结果
其中，
1.动态路由和query属性传值页⾯刷新参数不会丢失， params会丢失
2.动态路由⼀般⽤来传⼀个参数时居多(如详情页的id), query、params可以传递⼀个也可以传递多个参数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。