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

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

完美解决问题

相关推荐
Dontla4 分钟前
浏览器localStorage共享机制介绍(持久化客户端存储方案)本地存储冲突、iframe、XSS漏洞、命名空间隔离
前端·网络·xss
●VON7 分钟前
React Native for OpenHarmony:构建高性能、高体验的 TextInput 输入表单
javascript·学习·react native·react.js·von
●VON12 分钟前
React Native for OpenHarmony:ActivityIndicator 动画实现详解
javascript·学习·react native·react.js·性能优化·openharmony
霍理迪19 分钟前
JS其他常用内置对象
开发语言·前端·javascript
tao35566721 分钟前
HTML-03-HTML 语义化标签
前端·html
小马_xiaoen24 分钟前
IndexedDB 从入门到实战:前端本地大容量存储解决方案。
前端
BYSJMG26 分钟前
计算机毕业设计选题推荐:基于Hadoop的城市交通数据可视化系统
大数据·vue.js·hadoop·分布式·后端·信息可视化·课程设计
jiayong2328 分钟前
Vue2 与 Vue3 常见面试题精选 - 综合宝典
前端·vue.js·面试
We་ct35 分钟前
LeetCode 383. 赎金信:解题思路+代码解析+优化实战
前端·算法·leetcode·typescript
BYSJMG35 分钟前
Python毕业设计选题推荐:基于大数据的美食数据分析与可视化系统实战
大数据·vue.js·后端·python·数据分析·课程设计·美食