vue 动态路由匹配&路由组件传递参数

动态路由匹配

动态路由匹配的基本使用

当我们需要许多类似路由（例如用户界面，不同用户登录的界面不相同），就需要写许多基本相同的路由，这个时候我们就可以使用动态路由来解决这个问题。

应用场景：通过动态路由参数的模式进行路由的匹配

在通过路由设置完成后，通过 $router.params 获取路由的参数

var router = new VueRouter({
　　router: [
　　　　//动态路径参数 以冒号开头
　　　　{ path: '/user/:id', component: User }
　　]
})

const User = {
　　//路由组件中通过 $router.params 获取路由参数
　　template: `<div>User{{ $router.params.id }}</div>`
}

路由组件传递参数

$router与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

props的值为布尔类型

const router new VueRouter({
　　router: [
　　　　//如果 props 被设置为 true， router.params 将会被设置为组件属性
　　　　{ path: '/user/:id', component: User, props:true}
　　]
})

const User = {
　　props: ['id'],//使用 props 接收路由的参数
　　template: `<div>用户ID:{{ id }}</div>` //使用路由参数
}

props的值为对象类型

当props的值为对象类型的时候，此时通过路径传递过来的值将无法使用，子组件只能获取到props传递的静态参数

const router new VueRouter({
　　router: [
　　　　//如果 props 是一个对象，它会被按原样式设置为组件属性
　　　　{ path: '/user/:id', component: User, props:{ uname:'yzy', age: 21 } }
　　]
})

const User = {
　　props: ['uname',age],
　　template: `<div>用户ID:{{ uname + '---' + age}}</div>`
}

如果既想传递路径中的参数，也想传递静态参数，可以通过props函数类型传递参数

props的值为函数类型

 

 

const router new VueRouter({
　　router: [
　　　　//如果 props 是一个函数，则这个函数 接收 对象为自己的形参
　　　　{ path: '/user/:id', 
　　　　　component: User,
　　　　  props:router => ({ uname: 'yzy', age: 21, id: router.parops.id})
　　]
})

const User = {
　　props: ['uname','age'，'id'],
　　template: `<div>用户ID:{{ uname + '---' + age + '---' + id }}</div>`
}