vue路由传参的问题

vue路由传参的问题

index.vue:
<button>显示1和2</button> // 点击则会跳转到path:/a的页面
<button>只显示2</button> // 点击则会跳转到path:/a的页面
<router-view></router-view>

router.js:
{
path: '/a',
name: 'a',
component: () => import('@/views/a.vue'),
},

如果第二个按钮使用to='/a?only2=true'，在a.vue里通过this.$route.query能获取到，但是信息会暴露在地址栏

求解，有没有能直接在router.js文件里面传递params的操作，类似this.$router.push({path:'/a',params:{only2:true}})这种效果的操作

像是修改第二个按钮的逻辑，让他跳转到 path:'/middle'
在router.js里添加
{
path:'/middle',
redirect:'/a',
params:{
only2:true
}
}

或者说有没有能不通过地址栏传参的形式，在a.vue能拿到特定的标识(only2:true)

回答

可以通过增加一个中间路径来实现
{
    path:'/middle',
    redirect:{path:'/a',params:{only2:true}}
}

缺点是如果原路径就是/a，那么就不会因为这个params而重新加载a.vue

1、保存到vuex或者localstorage里，
2、this.$router.push({path:'/a',query:{params: [ {only2:true}}})
第二种不会暴露only2:true，在地址栏里只会显示params: [object object]

以上是 vue路由传参的问题 的全部内容， 来源链接： utcz.com/a/104470.html

回到顶部