08.vue-router动态路由匹配

Posted 2021-03-21 songsongblue

动态匹配路由的基本用法

思考:

<!-有如下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>'
}