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

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

完美解决问题

相关推荐
踩着两条虫7 分钟前
VTJ.PRO AI + 低代码实战:接入高德地图
前端·vue.js·ai编程
绝世唐门三哥7 分钟前
React性能优化:memo、useMemo和useCallback全解析
前端·react.js·memo
兔子零102410 分钟前
Claude Code 都把宠物养进终端了,我做了一个真正能长期玩的中文宠物游戏
前端·游戏·游戏开发
xiaotao13110 分钟前
Vite 与 Webpack 开发/打包时环境变量对比
前端·vue.js·webpack
摆烂工程师15 分钟前
教你如何查询 Codex 最新额度是多少,以及 ChatGPT Pro、Plus、Business 最新额度变化
前端·后端·ai编程
捧月华如19 分钟前
响应式设计原理与实践:适配多端设备的前端秘籍
前端·前端框架·json
笨笨狗吞噬者21 分钟前
VSCode 插件推荐 Copy Filename Pro,快速复制文件、目录和路径的首选
前端·visual studio code
web_小码农21 分钟前
CSS 3D动画 旋转木马示例(带弧度支持手动拖动)
javascript·css·3d
Armouy23 分钟前
Electron:核心概念、性能优化与兼容问题
前端·javascript·electron
F2E_Zhangmo25 分钟前
react native如何发送蓝牙命令
javascript·react native·react.js