Vue 路由props 多路由参数时使用

传统路由参数获取

this.$route.query.id
this.$route.query.a
this.$route.query.b
this.$route.query.c
this.$route.query.d
this.$route.query.e
......
1
2
3
4
5
6
7

如果参数很多，特别麻烦

第一种接收parpas参数 使用props

http.www.csdn.net/123/321

   {
        name: 'user',
        path: '/user/:id/:age',
        component: User,
        props: true//
    }
1
2
3
4
5
6

为true路由会把所有params的参数，以props传给组件

user组件里获取

 <div>
     {{id}}
    {{age}}
  </div>

 props: ['id', 'age'],
1
2
3
4
5
6

---

第二种接收query参数 使用props

{
                name: 'user',
                path: '/user',
                component: User,
                props($route) { return { id: $route.query.id, age: $route.query.age } }
}
1
2
3
4
5
6

 {{id}}     
 {{age}}
 
 props: ['id', 'age'],
1
2
3
4