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

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

携带参数

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

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

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

获取参数

query方式

this.$route.query.id

params(restful)

this.$route.params.name