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

1. query 传值

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

<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)
    }

同时获取的值会在地址栏中显示出来，并且刷新页面，打印的值不会消失

2. params 传值

将按钮中定义的方法改写，在这里通过 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)
    }

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

3. 动态路由拼接传值

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

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)
    }

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