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

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

完美解决问题

相关推荐
被考核重击1 分钟前
浏览器原理
前端·笔记·学习
网络研究院6 分钟前
Firefox 146 为 Windows 用户引入了加密本地备份功能
前端·windows·firefox
Mr.Jessy9 分钟前
JavaScript高级:深入对象与内置构造函数
开发语言·前端·javascript·ecmascript
温宇飞9 分钟前
深入理解 JavaScript 模块系统:CJS 与 ESM 的实现原理
javascript
老华带你飞25 分钟前
列车售票|基于springboot 列车售票系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习·spring
幸运小圣34 分钟前
深入理解ref、reactive【Vue3工程级指南】
前端·javascript·vue.js
用户479492835691536 分钟前
面试官最爱挖的坑:用户 Token 到底该存哪?
前端·javascript·面试
Irene199140 分钟前
Web前端开发中的垃圾回收详解
前端
Heo1 小时前
Vue3.4中diff算法核心梳理
前端·javascript·面试
惜.己1 小时前
前端笔记(二)
前端·笔记