vue路由传参的问题

Question

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)

Answer 1

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

Answer 2

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

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

Answer 3

params不是可以满足你的需求嘛？要么就用localstorage或者vuex来实现咯