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

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

完美解决问题

相关推荐
Hao_Harrision15 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RandomChoicePicker(标签生成)
前端·typescript·react·vite7·tailwildcss
浮游本尊15 小时前
React 18.x 学习计划 - 第九天:React 18高级特性和最佳实践
前端·学习·react.js
诸神缄默不语15 小时前
用Vite创建Vue3前端项目
前端·vite·cue3
阿蒙Amon15 小时前
JavaScript学习笔记:5.函数
javascript·笔记·学习
旧梦吟15 小时前
脚本 生成图片水印
前端·数据库·算法·golang·html5
How_doyou_do15 小时前
模态框与DOM,及React和Vue中的优化
前端·vue.js·react.js
慧慧吖@15 小时前
React高级用法
javascript·react.js·ecmascript
前端不太难15 小时前
RN 的导航体系太混乱,如何选型和架构设计?
前端·react native·架构
....49215 小时前
el-select 下拉框支持线上 SVG + 本地图片图标 展示
前端·javascript·vue.js
L、21816 小时前
Flutter + OpenHarmony 分布式能力融合:实现跨设备 UI 共享与协同控制(终极篇)
javascript·分布式·flutter·ui·智能手机·harmonyos