导航守卫
全局导航守卫
全局钩子
// client/index.js
router.beforeEach((to, from, next) => { // 跳转前
console.log('before each invoked')
next() // next 必须执行，才能跳转
})
router.beforeResolve((to, from, next) => {
console.log('before resolve invoked')
next()
})
router.afterEach((to, from) => { // 跳转后，不需要 next
console.log('after each invoked')
})
beforeEach
进行数据校验，比如验证页面，用户需要登录后才能显示，设置跳转到 login 页面
// client/index.js
router.beforeResolve((to, from, next) => {
console.log('before resolve invoked')
if (to.fullPath === '/app') {
next('/login') // 或者 next({path: '/login})
} else {
next()
}
})
路由配置中增加钩子
beforeEnter 调用顺序是在 beforeEach 和 beforeResolve 之间。
// client/config/routes.js
export default [
{
path: '/app',
component: Todo,
beforeEnter (to, from, next) {
console.log(' app route before enter')
next()
}
}
]
组件内部增加钩子
// todo.vue
export default {
beforeRouteEnter (to, from, next) {
console.log('todo before enter')
next()
},
beforeRouteUpdate (to, from, next) {
console.log('todo update enter')
next()
},
beforeRouteLeave (to, from, next) {
console.log('todo leave enter')
next()
},
点击跳转 login 时
控制台
todo leave enter 组件被离开
before each invoked 新路由进入之前
before resolve invoked
after each invoked
点击跳转 app 时
before each invoked
app route before enter 路由配置的 beforeEnter
todo before enter 组件内的 beforeEnter
before resolve invoked 而beforeResolve 要等全局的 beforeEach、路由配置的 beforeEnter、组件内都触发才出发
after each invoked
同一个组件在不同路由下面显示的情况下 beforeRouteUpdate 才会触发
例如**路由传参的情况下,切换路由，组件会进行复用。**如果不这样做，需要通过 watch 监听 id。
// routes.js
{
path: '/app/:id',
component: Todo
},
// app.vue
<template>
<div id="app">
<div id="cover"></div>
<router-link to="/app/123">app123</router-link>
<router-link to="/app/456">app456</router-link>
<router-link to="/login">login</router-link>
</div>
</template>
// todo.vue
beforeRouteEnter (to, from, next) {
console.log('todo before enter', this)
next(vm => {
console.log('after enter vm.id is ', vm.id)
})
},
beforeRouteUpdate (to, from, next) {
console.log('todo update enter')
next()
},
beforeRouteLeave (to, from, next) {
console.log('todo leave enter')
if (global.confirm('are you sure?')) {
next()
} else {
}
},
路由钩子在组件内部的应用
beforeRouteEnter 和 beforeRouteUpdate 获取数据，当我们进入页面，数据已经渲染好了
beforeRouteEnter (to, from, next) {
console.log('todo before enter', this)
next(vm => {
console.log('todo enter vm.id is ', vm.id)
})
},
beforeRouteLeave 弹出确认框，是否离开
beforeRouteLeave (to, from, next) {
console.log('todo leave enter')
if (global.confirm('are you sure?')) {
next()
} else {
}
},
关于 beforeRouteUpdate
路由参数不同，组件相同时，生命周期是不会触发，导致数据不更新，应该使用 beforeRouteUpdate 或者 watch
命名视图
不同的 router-view 显示不同的组件
// client/app.vue
<template>
<div id="app">
<transition name="fade">
<router-view />
</transition>
<router-view name="a"/>
</div>
</template>
// client/config/routes.js
export default [
{
path: '/app',
components: {
default: Todo,
a: Login
}
},
{
path: '/login',
components: {
default: Login,
a: Todo
}
}
]
常见的三栏布局，菜单切换，可以用这种方式，当然传统的 layout 也可以实现。
异步路由（异步加载组件）
当路由非常多时，通过 webpack 一次性打包所有代码，导致 js 文件非常大，初始加载时间非常长。
异步路由：对于不同的路由，只加载对应代码和项目核心代码；而对应页面的代码，访问时再加载。
使用
使用异步路由，只需在对应组件使用 import 引入对应组件即可，这样当我们访问路由时，才会加载。
// import Todo from '../views/todo/todo.vue'
// import Login from '../views/login/login.vue'
export default [
{
path: '/app/:id',
props: 'true',
component: () => import('../views/todo/todo.vue')
}
},
{
path: '/login',
component: () => import('../views/login/login.vue')
}
]
安装 babel 插件
程序不支持直接在 component 部分写 import，需要安装 babel 插件。
npm i babel-plugin-syntax-dynamic-import -D
// .babelrc
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx",
"syntax-dynamic-import" // 添加配置
]
}
注意
核心代码中不要使用异步加载的组件，这样我们切换路由会没有效果。
