vue-router 传值的三种方式

最新推荐文章于 2025-01-17 20:20:47 发布

原创最新推荐文章于 2025-01-17 20:20:47 发布 · 1w 阅读

CC 4.0 BY-SA版权

文章标签：

38 篇文章

订阅专栏

本文详细介绍了Vue中三种常见的路由传值方式：query传值、params传值和动态路由拼接传值。通过实例代码展示了如何在不同场景下进行数据传递，并分析了每种方法的特点，包括数据在地址栏的显示情况及刷新页面后数据的保留状态。

上次被问到路由之间如何传值，我一整个蒙住，但其实在项目中也有用到过，所以今天把这些方法整理出来，以后便于翻阅

在主页面中写一个按钮，绑定方法

<button @click="sentMesg()">兄弟页面</button>

通过 path 来连接和组件页面 brother 之间的关系

sentMesg(){
      this.$router.push({
        path:'/brother',
        query: {
          id: 2,
          name: 'hjc'
        }
      })
    }

routes: [
    {
      path: `/brother`,
      name: 'brother',
      component:brother
    }
  ]

在组件页面 brother 中可以打印出来获取到的值

created(){
        console.log(this.$route.query.id)
        console.log(this.$route.query.name)
    }

在这里插入图片描述
同时获取的值会在地址栏中显示出来，并且刷新页面，打印的值不会消失

将按钮中定义的方法改写，在这里通过 name 来和组件页面 brother 之间联系

sentMesg(){
      this.$router.push({
        name:'brother',
        params: {
          id: 2,
          name: 'hjc'
        }
      })
    }

routes: [
    {
      path: `/brother`,
      name: 'brother',
      component:brother
    }
  ]

注意在这里打印的时候，获取数据的方式为params

created(){
        console.log(this.$route.params.id)
        console.log(this.$route.params.name)
    }

在这里插入图片描述
这种方法获取传值不会在地址栏中显示，但刷新页面打印的数据会消失

这种方法操作起来就要简单一些，没有多余的参数对象

sentMesg(){
      this.$router.push({
        path:'brother/6/hjc'
      })
    }

通过冒号拼接来获取动态路由的数据

routes: [
    {
      path: `/brother/:id/:name`,
      name: 'brother',
      component:brother
    }
  ]

created(){
        console.log(this.$route.params.id)
        console.log(this.$route.params.name)
    }

这种方法刷新页面数据不会消失，并且传递的数据也是可以在地址栏看到的
在这里插入图片描述

在这里插入图片描述