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

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

完美解决问题

相关推荐
小短腿的代码世界12 分钟前
Qwt实时FFT频谱分析深度解析:从信号采集到可视化渲染的完整架构设计
前端·qt·架构·交互
初见雨夜15 分钟前
提测前让 AI 检查一下代码,我的 Bug 率降低了 20%
前端·ai编程
光影少年16 分钟前
react的 useState 原理、批量更新机制
前端·react.js·掘金·金石计划
叫我少年16 分钟前
Markdown 备忘清单
前端
酒吧舞高材生21 分钟前
vue3 PC端-索引列表组件
前端·vue.js
咪饭只吃一小碗23 分钟前
从变量提升到 V8 预编译,彻底搞懂 JS 执行机制
javascript
农夫三拳有点疼=-=23 分钟前
vue3实现输入框标签和文本交互
javascript·vue.js·交互
2301_7807896627 分钟前
多层级 CC 防护体系:前端验证与后端限流的协同配置实践
运维·服务器·前端·网络安全·智能路由器·状态模式
ZC跨境爬虫29 分钟前
跟着MDN学HTML_day_47:(Document接口)
前端·javascript·ui·html·ecmascript·音视频