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

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

完美解决问题

相关推荐
川冰ICE3 分钟前
JavaScript工程化②|Webpack5基础配置,打包你的第一个项目
开发语言·javascript·ecmascript
YHHLAI3 分钟前
JavaScript 同步异步精讲:单线程、事件循环、Promise 执行机制
开发语言·javascript·ecmascript
Web打印5 分钟前
HttpPrinter web打印控件 官方文档(https://wiki.httpprinter.com/)快速检索目录
java·javascript·chrome
Invictus_cl7 分钟前
条纹圆形进度条(彩虹色)
开发语言·前端·javascript
excel28 分钟前
从封装到继承:深入理解 TypeScript 类中的 public、private、protected、static
前端
imkaifan28 分钟前
工作流(Worker/Graph)配置对象如何解读、子图
javascript·工作流·(worker/graph)·配置对象如何解读·子图
向日的葵00628 分钟前
vue3路由的replace属性(四)
前端·javascript·vue.js·vue路由
杨超越luckly30 分钟前
Agent应用指南:利用GET请求获取理想汽车门店位置信息
前端·python·html·汽车·可视化
阿猫的故乡30 分钟前
Vue模板引用和组件暴露:ref拿DOM、defineExpose调方法,案例多到眼花
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员34 分钟前
从Electron到Tauri,Rust+Vue(Tauri) 实现超高性能桌面日志应用开发,以及开发避坑指南
vue.js·rust·electron