1、跳转到新标签页
第一种:
dofunc () {
let routeUrl = this.$router.resolve({
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
}
//跳转时页面
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
1.动态路由和query属性传值 页面刷新参数不会丢失, params会丢失
2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。