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

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

完美解决问题

相关推荐
炽烈小老头2 分钟前
【每天学习一点算法 2026/03/17】括号生成
前端·学习·typescript
大漠_w3cpluscom7 分钟前
如何在 CSS 中正确使用 if()
前端
eason_fan7 分钟前
踩坑记录:Mac M系列芯片下 pnpm dlx 触发的 esbuild 架构不匹配错误
前端·前端工程化
程序猿大波10 分钟前
基于java,SpringBoot和Vue餐饮公司食堂管理系统设计
java·vue.js·spring boot
swipe17 分钟前
JavaScript 对象操作进阶:从属性描述符到对象创建模式
前端·javascript·面试
IT_陈寒38 分钟前
React开发者都在偷偷用的5个性能优化黑科技,你知道几个?
前端·人工智能·后端
还是大剑师兰特1 小时前
Vue3 前端专属配置(VSCode settings.json + .prettierrc)
前端·vscode·json
前端小趴菜051 小时前
vue3项目优化方案
前端·javascript·vue.js
Mr_Swilder1 小时前
WebGPU 基础 (WebGPU Fundamentals)
前端
张3蜂2 小时前
HTML5语义化标签:现代网页的骨架与灵魂
前端·html·html5