解决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参数进行传参!

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

完美解决问题

相关推荐
草字25 分钟前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
一位搞嵌入式的 genius28 分钟前
Vue实例挂载:从原理到项目实践的全维度解析
前端·javascript·vue.js·前端框架
cindershade33 分钟前
Vue 3 Keep-Alive 深度实践:从原理到最佳实践
vue.js·vue-router
waeng_luo34 分钟前
[鸿蒙2025领航者闯关] 表单验证与用户输入处理最佳实践
开发语言·前端·鸿蒙·鸿蒙2025领航者闯关·鸿蒙6实战·开发者年度总结
0思必得039 分钟前
[Web自动化] 开发者工具应用(Application)面板
运维·前端·python·自动化·web自动化·开发者工具
m0_7400437340 分钟前
Vue Router中获取路由参数d两种方式:$route.query和$route.params
前端·javascript·vue.js
风止何安啊41 分钟前
Event Loop 教你高效 “划水”:JS 单线程的“摸鱼”指南
前端·javascript·面试
@菜菜_达1 小时前
goldenLayout布局
前端·javascript
Shirley~~1 小时前
vite的tersor在lib库模式下不生效问题
javascript·vue.js·ecmascript
小飞侠在吗1 小时前
vue 生命周期
前端·javascript·vue.js