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

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

完美解决问题

相关推荐
竹林81816 分钟前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
Momo__19 分钟前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一23 分钟前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富26 分钟前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇26 分钟前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇26 分钟前
React中的forwardRef
前端·react.js·面试
槑有老呆35 分钟前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
风骏时光牛马37 分钟前
Verilog开发常见问题汇总解析
前端
子兮曰39 分钟前
AI Coding Method Map:一张图看懂 AI 编程的完整链路
前端·人工智能·后端