欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue路由传参总结

程序员文章站 2022-05-18 16:55:21
...

一、动态路由传参

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

使用步骤:

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

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

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

二、路由组件传参

1new 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']
};

三、路由传参

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

1new 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获取传递的参数
相关标签: vue 路由 传参