脚本宝典收集整理的这篇文章主要介绍了

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-router 笔记整理

全部内容,希望文章能够帮你解决

vue-router 笔记整理

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过