解决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 分钟前
使用 Vue 3 + Google Maps API 实现定位与路线规划功能
前端·javascript·vue.js
低头专研1 小时前
用 HTML 网页来管理 Markdown 标题序号
前端·html·markdown·markdown标题编号
小妖6661 小时前
html 给文本两端加虚线自适应
前端·javascript·html
阿諪諪1 小时前
Vue Router(1)
前端·javascript·vue.js
web_Hsir1 小时前
vue + uniapp 实现仿百度地图/高德地图/美团/支付宝 滑动面板 纯css 实现
css·vue.js·uni-app
键指江湖1 小时前
React 条件渲染
前端·react.js·前端框架
禾小西1 小时前
IDEA的使用
java·前端·intellij-idea
斗锋在干嘛1 小时前
WebView 与 JavaScript 的交互
开发语言·javascript·交互
天天进步20151 小时前
C++使用WebView2控件,通过IPC通信与Javascript交互
javascript·c++·交互
@PHARAOH1 小时前
HOW - 实现 useClickOutside 或者 useClickAway
前端·javascript·react.js