Vue router中携带参数与获取参数

Vue router中携带参数与获取参数

1. 携带参数

   1. query方式，就是？+&结构，例如/login?id=1

      <router-link :to="{ name:'login',query:{id:1} }">登录</router-link>
      this.$router.push({
               path: '/login',
               query:{
                     id:id,
                }
      })
      

   2. Params方式，也就是类似于restful风格，例如/register/San

      <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>
      this.$router.push({
               name: 'monitor',
               params:{
                     id:id,
                }
      })
      

      这种方式（restful风格）配置的路由，要在配置路由的时候格外注意一点

      var router = new VueRouter({
          routes:[
              {name:'login',path:'/login',component:Login},
              {name:'register',path:'/register',component:Register}
          ]
      })
      

2. 获取参数

   1. query方式

      this.$route.query.id
      

   2. params(restful)

      this.$route.params.name