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

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

完美解决问题

相关推荐
毕设源码-朱学姐42 分钟前
【开题答辩全过程】以 基于Web的餐饮管理系统的设计为例,包含答辩的问题和答案
前端
MoonPointer-Byte44 分钟前
[特殊字符]The Omniscient Tome | 全知之书
javascript·html5
fanruitian2 小时前
visualstudio code cline使用mcp amap
java·前端·visual studio
lzh_hz2 小时前
zustand源码解析
前端·源码阅读
无声20172 小时前
Turborepo 的 Docker 化实战
前端·vue.js
韭菜炒大葱2 小时前
React 之 自定义 Hooks 🚀
前端·react.js·面试
用户91743965392 小时前
Magnitude:强!一款基于 Al 视觉的 Web 自动化框架
运维·前端·自动化
POLITE33 小时前
Leetcode 21.合并两个有序链表 JavaScript (Day 10)
javascript·leetcode·链表
止观止3 小时前
告别回调地狱:深入理解 JavaScript 异步编程进化史
javascript·ecmascript·promise·async/await·异步编程·前端进阶
+VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue在线教育学习系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·学习·课程设计