Vue-路由传参的两种方式

最新推荐文章于 2024-08-14 18:44:30 发布

李晨飞_

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量192

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_59878114/article/details/120835440

版权

vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文详细介绍了在前端开发中，如何通过路由params和query进行参数传递。使用`this.$route.params`可以获取路由参数，例如关键词'李晨飞'；而通过`this.$router.push`结合`query`可以将文章ID传到详情页，例如`aid`。这两种方式在构建单页面应用时非常常见，是连接不同组件间数据流动的重要手段。

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

方式一：params

路由传参

  {
    path: '/search/:keywords',
    component: () => import('@/views/SearchResult')
  },

获取方式：

this.$route.params.keywords //李晨飞

方式二：query

组件传参

// 文章点击事件
    articleListClickFn (artId) {
      this.$router.push({
        path: '/art_detail',
        query: {
          aid: artId // 文章id传到文章详情页
        }
      })
    }

获取方式

this.$route.query.aid

李晨飞_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-路由传参的两种方式

方式一：路由传参 { path: '/search/:keywords', component: () => import('@/views/SearchResult') },获取方式：this.$route.params.keywords //李晨飞方式二：组件传参// 文章点击事件 articleListClickFn (artId) { this.$router.push({ path: ..
复制链接

扫一扫

专栏目录