vue-router 笔记整理

  • 组件内使用路由

    watch可以监听,或者beforeRouteUpdate 钩子函数监听。用途?
    用途:如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个
    /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取
    用户信息)。

  • 路由的三大模式

    路由模式(history、
    hash 和 abstract)路由的push等同window.history.pushState(一个状态对象,
    title, url)

  • 路由组件传参

    使用props 将组件和路由解耦

  • 路由守卫(钩子函数

    全局的,单个路由独享的, 组件级的
    全局:router.beforeEach(to, from, next)异步解析 状态有“等待中”,“确定的”
    router.afterEach(to, from)
    路由独享钩子:beforeEnter(to, from, next) 用法同全局的
    router.beforeEach()
    组件级:

    beforeRouteEnter(to,from, next)
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 this
    // 因为当守卫执行前,组件实例还没被创建
    
    beforeRouteUpdate(to,from, next)
        // 在当前路由改变,但是该组件被复用时调用
       // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之
       间
       //跳转的时候,
      // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下
      被调用。
      // 可以访问组件实例 `this`
    
       beforeRouteLeave(to,from, next )
       // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`

    beforeRouteLeave 这个钩子函数很有用,顾名思义,导航离开该组件对应的路由调用,可以做一些
    离开时候的comfirm判断,比如有重要的信息需要用户保存后才能进行跳转、存储session、清除定
    时器等。

  • 路由元信息:
    可以配置 meta 字段,通常用来做是否需要登录的判断
    meta: { requiresAuth: true }
  • 路由的过渡:
    设置不同的 name 比如name=fade
  • 数据获取:(比较陌生,后续着重看)
    导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
    导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。
  • 滚动行为
    这个功能只在支持 history.pushState 的浏览器中可用
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })
  • 路由懒加载
    结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载

    参考文献

  • vue-router 中文官方文档
    原文作者:健儿
    原文地址: https://segmentfault.com/a/1190000013058927
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞