问答

vue路由传参的问题

作者:admin 2021-05-07 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png

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)

###

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

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

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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue路由传参的问题

    vue路由传参的问题

  • cmd执行命令返回meaningless REX prefi

    cmd执行命令返回meaningless REX prefi

  • element-plus 怎么触发ImageViewer Eve

    element-plus 怎么触发ImageViewer Eve

  • 数组下标问题

    数组下标问题

腾讯云代理商
海外云服务器