vue-router导航守卫&&滚动&&路由懒加载

2018-06-19 本文已影响0人前端_周瑾

导航守卫

正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫，有多种机会植入路由导航过程种：全局的，单个路由独享的，或者组件级的

记住 参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdata 的组件内守卫。

全局守卫

你可以使用router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({...})
router.beforeEach((to,form,next)=>{
    
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于 等待中

每个守卫方法接受三个参数：
to：Route：即将要进入的目标路由对象
from： Route ：当前导航正要离开的路由
next： Function: 一定要调用该方法来resolve这个钩子，执行效果依赖next方法调用参数

next（）：进行管道中的下一个钩子，如果全部钩子执行完了，则导航的状态就是confirmed(确认的)
next(false): 中断当前的导航。如果浏览器的url改变了(可能是用户手动或者浏览器后退按钮)，那么url地址会重置到 from 路由对应的地址。
next('/')或者next({path: '/'}):跳转到一个不同的地址，当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如 replace：true、name: 'home'之类的选项以及任何用在router-link的toprop或者router.push中的选项
next(error):(2.4.0+)如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调

确保要调用 next 方法，否则钩子就不会被 resolved

完整的导航解析

导航被触发
在失活的组件里调用离开守卫
调用全局的 beforeEach 守卫
在重用的组件里调用 beforeRouteUpdata 守卫
在路由配置里调用 beforeEnter
解析异步路由组件
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫(2.5+)
导航被确认
调用全局的 afterEach 钩子
触发DOM 更新
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

滚动行为

使用前端路由，当切换到新路由时，想要页面滚动到顶部，或者时保持原先的滚动位置，就像重新加载页面那样，vue-router就能做到

ps：这个功能只在支持 history.pushState 的浏览器中可用

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
    routes: [...]
    scrollBehavior(to,from,savedPosition){
        // return 期望滚动到哪个的位置
    }
})

scrollBehavior 方法接收 to 和 from 路由对象，第三个参数 savedPosition 当且仅当 popstate 导航(通过浏览器的前进\后退按钮触发)时才可用

路由懒加载

当打包构建应用时，javascript包会变得非常大、影响页面加载，如果我们能把不同路由对应得组件分割成不同得代码块，然后当路由访问的时候才在家对应组件，这样更加高效
结合Vue的异步组件和webpack的代码分割功能，轻松实现路由组件的懒加载。
首先，可以将异步组件定义为返回一个Promise的工厂函数

const Foo = () => Promise.resolve({// 组件定义对象})

第二，在webpack2中，我们可以使用动态 import语法来定义代码分块点
import('./Foo.vue')

ps: 如果使用的时babel，你将需要添加 sybtax-dynamic-import 插件，才能使Babel可以正确的解析语法

结合这两者，这就使如何定义一个能够被webpack自动代码分割的异步组件

const Foo = () => import('./Foo.vue')

在路由配置中什么都不需要改变，只需要像往常一样使用Foo：
const router = new VueRouter({
routes: [
{path: '/foo', component: Foo}
]
})

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块中，只需要使用命名 chunk，一个特殊的注释语法来提高chunk name(需要webpack>2.4)

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中