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

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

完美解决问题

相关推荐
minglie1几秒前
mqtt接入事件回调测试
前端·javascript
Luna-player16 分钟前
Webpack vs Vite
前端·vue.js·webpack
我是初九17 分钟前
【遇见狂神说|前端】HTML5
前端·html
Cg1362691597420 分钟前
js引入方式
前端·javascript·ajax
J超会运24 分钟前
从零部署Nginx:Web全栈实战指南
运维·前端·nginx
-SOLO-31 分钟前
chrome插件 将网页转化为markdown
前端·chrome
酉鬼女又兒36 分钟前
零基础入门Web应用开发(备赛蓝桥杯)_网页布局原理
前端·职场和发展·蓝桥杯·html5
zhaoyin199437 分钟前
JavaScript面试题笔记
java·javascript·笔记
计算机学姐40 分钟前
基于SpringBoot的宠物诊所管理系统
java·vue.js·spring boot·后端·spring·elementui·宠物
zzh0811 小时前
web技术与nginx网站环境部署
运维·前端·nginx