vue-router params无法传参的问题（路由传参）

最新推荐文章于 2024-09-26 23:25:16 发布

bobcatsW

最新推荐文章于 2024-09-26 23:25:16 发布

阅读量3.4k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/h919685908/article/details/126789747

版权

在Vue.js应用中遇到路由传参问题，当使用params进行组件间传参时，从搜索框跳转能成功传递，但直接在展示页面内搜索无法传递params参数。通过将`this.$router.push`更改为`this.$router.replace`解决了问题。了解`push`与`replace`的区别，push会在历史记录中增加新条目，而replace则不会，点击返回按钮时不会再次进入replace的页面。

摘要由CSDN通过智能技术生成

代码纠正

由于搜索框（带params参数）与展示页面（带query参数）分布在两个组件，所以需要进行路由传参。但在实现过程中发现：通过搜索框从主页跳转至展示组件时能带上params参数，但在展示页面内输入搜索则无法再传递params参数。

原代码如下：（点击搜索调用goSearch函数）

    goSearch() {
        console.log(this.keyword)
      let location = {
        name: "Search",
        path:"/Search",
        params: {
          keyword: this.keyword || undefined,
        },
        query:this.$route.query
      };
      this.$router.push(location);

解决办法：将this.$router.push改为this.$router.replace

    goSearch() {
        console.log(this.keyword)
      let location = {
        name: "Search",
        path:"/Search",
        params: {
          keyword: this.keyword || undefined,
        },
        query:this.$route.query
      };
      this.$router.replace(location);