当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active 。
默认 hash 模式:使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
history 模式:充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,此模式如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面。
动态路由匹配
{path: '/user/:id', component: User}
user/abc user/123 都将映射到相同的路由
this.$route.params.id(template 中 $route.params.id)
{path: '/user-*'} 匹配以 `/user-` 开头的任意路径
嵌套路由
User 需要 <router-view></router-view>
children 路径不能以 "/" 开头
{
path: '/user',
component: User,
children: [
{
// 当 /user/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
编程式的导航
<router-link :to="..."> 等同于调用 router.push(...)
this.$router.push(location, onComplete?, onAbort?)
this.$router.push('home')
this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.push({ name: 'user', params: { userId: '123' }})
location 如果提供了 path,params 会被忽略,解决办法:{path: `register/${id}`}
onComplete 和 onAbort 两个回调用于导航成功完成(在所有的异步钩子被解析之后)或终止(导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由)的时候进行相应的调用
<router-link :to="..." replace> 等同于调用 router.replace(...),和 router.push() 唯一的不同就是,它不会向 history 添加新记录,而是替换掉当前的 history 记录
router.go(n) 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
命名视图
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
重定向和别名
{ path: '/a', redirect: '/b' }
{ path: '/a', redirect: { name: 'foo' }}
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
{ path: '/a', component: A, alias: '/b' }
导航守卫
全局前置守卫
router.beforeEach((to, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
// some code
next()
})
全局后置钩子
router.afterEach((to, from) => {
// ...
})
路由独享的守卫
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {/* */}
}
组件内的守卫
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 【不能】获取组件实例 `this`,不过,你可以通过传一个回调给 next来访问组件实例
next(vm => {
// 通过 `vm` 访问组件实例
})
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
路由元信息
{
path: 'bar',
component: Bar,
meta: { requiresAuth: true, title: 'BAR' }
}
遍历 $route.matched 来检查路由记录中的 meta 字段。
滚动行为
scrollBehavior 只在支持 history.pushState 的浏览器中可用。
new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
// return 期望滚动到哪个的位置
}
})
路由懒加载
const Foo = () => import('./Foo.vue')
https://router.vuejs.org/zh/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。