解决Vue编程式导航路由跳转不显示目标路径问题

我们配置一个编程式导航的路由跳转,跳转到 /search 页面,并且携带categoryName和categoryId两个query参数。

javascript 复制代码
this.$router.push({
  path: "/search",
  query: {
    categoryName: dataset.categoryname,
    categoryId: dataset.categoryid
  }
})

如果我们点击跳转,路径应该是localhost:8080/#/search?categoryName=xxx&categoryId=xxx

但是,我们点击却发现/search路径丢失了,仍然停留在home页面:

解决方法:

可能是在路由配置上出了问题

我们在search路由的配置上配置了一个params 参数占位符。

但是我们上面并没有使用params参数进行传参!

我们可以在占位符后加上一个问号,表示该参数可传可不传。

完美解决问题

相关推荐
鹿衔`9 小时前
解决Flink on Yarn模式多Yarn Session会话提交
java·前端·flink
u***u6859 小时前
前端组件单元测试模拟,Jest mock函数
前端·单元测试
前端摸鱼匠10 小时前
Vue 3 的watchEffect函数:介绍watchEffect的基本用法和特点
前端·javascript·vue.js·前端框架·ecmascript
拉不动的猪10 小时前
基本数据类型Symbol的基本应用场景
前端·javascript·面试
天庭鸡腿哥10 小时前
谷歌出品,堪称手机版PS!
javascript·智能手机·eclipse·maven
_小九10 小时前
【开源】耗时数月、我开发了一款功能全面【30W行代码】的AI图床
前端·后端·开源
just小千11 小时前
HTML进阶——常用标签及其属性
前端·html
惜.己11 小时前
html笔记(一)
前端·笔记·html
Lsx-codeShare11 小时前
一文读懂 Uniapp 小程序登录流程
前端·javascript·小程序·uni-app