动态匹配路由的基本用法
思考:
- <!- 有如下 3 个路由链接.->
- <router-link to="/user/1">User1</router-link>
- <router-link to="/user/2">User2</router-link>
- <router-link to="/user/3">User3</router-link>
- // 定义如下三个对应的路由规则, 是否可行? ? ?
- { path: /user/1', component: User }
- { path: /user/2', component: User }
- { path: '/user/3',ncomponent: User }
应用场景: 通过动态路由参数的模式进行路由匹配
- var router = new vueRouter ({
- routes: [
- // 动态路径参数以冒号开头
- ( path: '/user/:id', component: uUser
- }
- ]
- })
- const User = {
- // 路由组件中通过 $route.params 获取路由参数
- template: '<div>user {{$route.params.id }}</div>'
- }
路由组件传递参数
$route 与对应路由形成高度耦合, 不够灵活, 所以可以使用 props 将组件和路由解耦
1.props 的值为布尔类型
- const router = new VueRouter ({
- routes: [
- // 如果 props 被设置为 true, route.params 将会被设置为组件属性
- ( path: '/user/:id', component: user, props: true]
- ]
- })
- const User = {
- props: ['id'], // 使用 props 接收路由参数
- template: '<div > 用户 ID:{{id}}</div>' // 使用路由参数
- }
2.props 的值为对象类型
- const router = new vueRouter ((
- routes: [
- // 如果 props 是一个对象, 它会被按原样设置为组件属性
- { path: '/user/ :id', component: User, props: { uname: 'lisi', age: 12 }}
- ]
- })
- const User = {
- props: ['uname', 'age'],
- template: '<div > 用户信息: {{ uname + ---' + agel]</div>'
- }
3.props 的值为函数类型
- const router = new VueRouter ((
- routes:[
- // 如果 props 是一个函数, 则这个函数接收 route 对象为自己的形参
- { path: /user/:id',
- component: User,
- props: route => ({ uname: 'zs', age: 20, id: route.params.id })}
- ]
- })
- const User= {
- props: ['uname', 'age', 'id'],
- template: '<div > 用户信息: {{ uname + 1---' + age + ---'+ id}}</div>'
- }
来源: http://www.bubuko.com/infodetail-3344129.html