路由传参 / 保存路由跳转带过来的查询字符串并操作

最新推荐文章于 2023-03-28 17:09:58 发布

原创最新推荐文章于 2023-03-28 17:09:58 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何从一个页面跳转到另一个页面时传递参数，并在目标页面正确接收这些参数的方法。包括在组件方法中使用$router.push进行跳转并附带参数，以及在目标页面通过$route.query获取参数的具体实现。

在新闻跳转到新闻详情传递 id

// 新闻页面传递 id
    detail(row) {
      this.$router.push({
        path: '/home/detail', // 要注意与 routes 中的路径一致
        query: {id: row.id}
      })
    }

 // 详情页面获取 id
 methods中：
    getData () {
      this.id = this.$route.query.id
     // 其他操作
    }
 // 一进入详情页面就要获取详情
  watch: {
    '$route': 'getData'
  },
  mounted () {
    let self = this
    self.getData()
  },

参考：https://blog.youkuaiyun.com/zhangkeke_/article/details/79730597