vue路由传参总结

一、动态路由传参

使用场景：
login/userId/1001
通过参数判断用户权限

使用步骤：

1、new VueRouter({
	    routes: [
	      { path: '/user/:id/:age', component: User },
	    ]
  })

2、<router-link to="/user/1001/18">用户</router-link>

3、通过$route.params.id、$route.params.id获取传递的参数

二、路由组件传参

1、new VueRouter({
	routes: [
	      { path: '/user/:id/:age', component: User, props: true },
	    ]
  })
2、<router-link to="/user/1001/18">用户</router-link>
3、通过props接收
export default {
    props:['id','age']
};

三、路由传参

1、new VueRouter({
	routes: [
	      { path: '/user', component: User },
	    ]
  })
2、<router-link to="/user?id=23&age=18">用户</router-link>
3、通过$route.query.id、$route.query.id获取传递的参数

或

1、new VueRouter({
	routes: [
	      { path: '/user', component: User },
	    ]
  })
2、<router-link :to="{path:'/user?',query:{id:23,age:18}}">用户</router-link>
3、通过$route.query.id、$route.query.id获取传递的参数