美文网首页
Vue-router API总结

Vue-router API总结

作者: A郑家庆 | 来源:发表于2019-02-28 17:26 被阅读0次

    router-view

    https://github.com/vuejs/vue-router/blob/1.0/docs/zh-cn/nested.md
    路由和组件是有区别的:组件一般是在同一个页面的不同模块,但是路由是直接切换到另一个页面,之前的页面销毁。
    App.vue中的router-view会渲染顶级路由匹配到的组件。组件内部嵌套的router-view会渲染子路由匹配到的组件。

    路由守卫

    当路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
    定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
    总体来讲vue里面提供了三大类钩子
    1.全局守卫
    router.beforeEach 全局前置守卫 进入路由之前
    router.beforeResolve 全局解析守卫 在beforeRouteEnter调用之后调用
    router.afterEach 全局后置钩子 进入路由之后
    2.路由守卫
    router.beforeEnter进入路由之前
    3.组件守卫
    beforeRouteEnter 进入路由前
    beforeRouteUpdate 路由复用同一个组件时
    beforeRouteLeave 离开当前路由时

    完整的导航解析流程

    触发进入其他路由。
    调用要离开路由的组件守卫beforeRouteLeave
    调用局前置守卫:beforeEach
    在重用的组件里调用 beforeRouteUpdate
    调用路由独享守卫 beforeEnter。
    解析异步路由组件。
    在将要进入的路由组件中调用beforeRouteEnter
    调用全局解析守卫 beforeResolve
    导航被确认。
    调用全局后置钩子的 afterEach 钩子。
    触发DOM更新(mounted)。
    执行beforeRouteEnter 守卫中传给 next 的回调函数
    总结:除了router.afterEach是两个参数to,from以外,其他都是三个参数,to,from,next
    https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
    https://www.jianshu.com/p/7ff8f31afebe
    https://www.cnblogs.com/WQLong/p/8135553.html
    https://juejin.im/post/5b41bdef6fb9a04fe63765f1

    相关文章

      网友评论

          本文标题:Vue-router API总结

          本文链接:https://www.haomeiwen.com/subject/rxahuqtx.html