路由传参

组件之间的切换通常都会携带参数，本节讲解路由传参，路由传参分为两种形式。

传参方式一

路由传参的第一种形式是在 router-link 超链接标签中传递参数，代码如下。

<div id="app" v-cloak>
  <router-link to="/login?id=1">登录</router-link>
  <router-view></router-view>
</div>

这种形式的路径后面使用问号拼接，单击进入登录组件并携带参数，使用这种形式不需要修改路由的匹配规则。

然后介绍在登录组件中如何获取参数，组件代码如下。

<script>
  var login = {
    template: '<div><h1>登录--{{id}}</h1></div>',
    data() {
      return {
        id: null
      }
    },
    created() {
      console.log(this.$route)
      console.log(this.$route.query.id)
      this.id = this.$route.query.id
    }
  }
</script>

代码解析如下。

使用问号传参，最终的参数在 this.$route.query 中。

传参方式二

路由传参的第二种形式是修改匹配规则，代码如下。

<div id="app" v-cloak>
  //2．直接传递参数，不需要问号
  <router-link to="/login/1">登录</router-link>
  <router-view></router-view>
</div>

<script>
  var login = {
    template: '<div><h1>登录--{{id}}</h1></div>',
    data() {
      return {
        id: null
      }
    },
    created() {
      //3．使用this.$route.params.id获取数据
      console.log(this.$route)
      console.log(this.$route.params.id)
      this.id = this.$route.params.id
    }
  }

  var router = new VueRouter({
    routes: [{
    //1．修改匹配规则，使用占位置传参
      path: '/login/:id',
      component: login
    }]
  })
</script>

代码解析如下。

使用修改路由匹配规则这种传参方式需要注意参数的获取，参数同样是在 this.$route 中，下一层是 this.$route.params，与方式一是有区别的。以上就是对路由传参的两种方式的介绍。