标签:添加 常用 配置 相同 foo 内容 路径 date match
像/user/foo
和/user/bar
都映射到相同的路由。也就是说根据不同的ID
,渲染相同的User
组件。可以使用动态路径参数来达到这个效果。
动态路径参数使用冒号:
标记,后面为参数的名称,参数会被设置到this.$route.params
中。
<script>
// 匹配模式
/user/:username
// 匹配到的路径为
/user/evan
// $route.params 获取到的参数对象
{ useranme: 'evan' }
</script>
注意:带:
冒号的配置可以理解为正则匹配,因此你可以在最后设置一个?
的惰性匹配,表示可以出现 0 次或 1次。
当使用路由参数时,如从/user/foo
导航到/user/bar
时,原来的组件实例会被复用。因为两个路由都渲染同一个组件,比起销毁再创建,复用则显得更加高效。这也意味着组件的生命周期钩子函数不会再被调用。
复用组件时,相对路由参数的变化作出相应的话,可以使用watch
(监听)$route
对象的变化。也可以使用beforeRouteUpdate
路由更新的导航守卫。
<script>
const User = {
template: '...',
// 1. 通过监听路由对象变化的形式
watch: {
'$route' (to, from) {
// 对路由变化作出响应
}
},
// 2. 通过更新路由的钩子函数
beforeRouteUpdate (to, from, next) {
// 路由变化会触发...
}
}
</script>
匹配任意路径,可以使用通配符(*);注意:使用通配符路由时,必须放在配置的最后。通常用于客户端404错误。
<script>
{ path: '*' } // 会匹配所有路径
{ path: '/user-*' } // 会匹配以 /user- 开头的任意路径
</script>
使用通配符时,$route.params
内会自动添加一个名为pathMatch
参数。注意:pathMatch
获取的是*
部分的内容
<script>
// { path: '/user-*' }
this.$router.push('/user-admin');
this.$router.params // 获取到的是 { pathMatch: 'admin' }
</script>
标签:添加 常用 配置 相同 foo 内容 路径 date match
原文地址:https://www.cnblogs.com/yuxi2018/p/11967265.html