路径参数匹配模式
//通过这种方式匹配的可以直接拿到 路径参数 id
const User = {
name: 'User'
template: '<div>User</div>',
mounted() {
console.log('这是User组件且id为' + this.$route.params.id)
}
}
const routes = [
{
path: '/',
name: 'Home',
redirect: '/user'
},
{ path: '/user/:id', component: User }
]
但是这种模式会有个问题就是,由于渲染的是同一个组件(当使用路由参数时,例如从 /user/foo 导航到 /user/bar),所以VM不选择更新,自然的,生命周期是不会调用的,
并且导航守卫也是不执行的
有一个官方解决方案 watch侦听器
const User = {
template: '<div>User</div>'
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
},
mounted() {
console.log('这是User组件且id为' + this.$route.params.id)
}
}
/*
或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫:
const User = {
template: '<div>User</div>'
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
},
mounted() {
console.log('这是User组件且id为' + this.$route.params.id)
}
}
*/
如果你有了解过vue-router內部原理,你自然就知道为什么这样做(其实$route和组件参数对象option的data和props都是相应式的数据)
你可能仍然有点疑惑,通过下面的一个例子你就知道了。
const User = {
name: 'User'
//请尤为注意这个模板语法 一旦访问的“参数路径”发生变化 /user/foo 导航到 /user/bar
//是会动态更新的
template: '<div>User {{$route.params.id}}</div>',
mounted() {
//但是这里不会更新
console.log('这是User组件且id为' + this.$route.params.id)
}
}
基于这个案例,你应该已经了解了 route的值,去动态更新页面,以至于达到更新数据的功能,但是这样不够优雅,仍然推荐侦听器 watch => $route
值得一提的是还有一直参数路径匹配 => ?id=1。但是在路线对象列表是无法体现的
const routes = [
{
path: '/',
name: 'Home',
//注意这个路径 ? 传参
redirect: '/user?1'
},
//注意注册资源路径
{ path: '/user', component: User }
]
//这种和 /user/:id 在vue-router实现是差不多的 组件不会整体卸载,重建,生命周期不重复执行
那么怎么获取url => ? 传参的值呢
const User = {
name: 'User'
template: '<div>User</div>',
mounted() {
console.log('这是User组件且id为' + this.$route.query.id)
}
}
捕获所有路线及其应用之一(404 Not found)
const routes = [
//注意注册资源路径
{ path: '/user', component: User },
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*',
component: UserQuery
},
{
// 会匹配所有路径
path: '*',
name: '404',
component: NotFindComponent
}
]
- 注意,之前说过路线匹配都是按照数组遍历方式,所以从左到右依次匹配,看路径是否是 /user (可带url的?参数),那就匹配 User 组件
- 若1未匹配成功,则匹配是否以 /user- 开头,那就匹配 UserQuery 组件
- 若2仍未匹配成功,则匹配所以路径(一般都是开发者定义好了其它默认路由,无法匹配的的路由就是找不到),那就匹配 NotFindComponent 组件
高级路由匹配模式
vue-router 使用 path-to-regexp 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配。查看它的文档学习高阶的路径匹配,还有这个例子 展示 vue-router 怎么使用这类匹配
附录
学习code 点击查看
上一篇: Vue-Router快速入门
下一篇:Vue-Router之嵌套路线&&动态跳转