Chaoszhu'Blog

Appearance

vue-router的基本使用 ​

10个Vue开发技巧 ​

【墙裂推荐】10个Vue开发技巧

路由模式 ​

hash、history(需后端支持)、abstract(SSR专用)

动态路径参数 /:id ​

  • $router是 路由实例对象 包括了路由的跳转方法，钩子函数等

  • $route是 路由信息对象 ，包括path，params，hash，query，fullPath，matched，name等路由信息参数

组件中使用$route.xxx(当前路由对象)获取【注意区分$router】

:id

路由元信息【meta对象】 ​

meta

路由懒加载 ​

lazy-router

vue-router的三种守卫 ​

全局守卫 ​

router.beforeEach((to, from, next) 前置钩子 ​

to: 即将要进入的 路由对象

from: 当前要离开的路由对象

next: Function: 一定要调用该方法来 resolve 这个钩子。否则不会往下走了。

router.beforeResolve 全局解析守卫(2.5.0+) ​

在组件内路由守卫beforeRouteEnter调用之后调用

router.afterEach((to, from) 后置钩子 ​

应用：关闭进度条

路由独享守卫 ​

beforeEnter (to, from, next) ​

js
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      // 路由独享守卫
      beforeEnter: (to, from, next) => { 
        // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
      }
    }
  ]
})

组件内的路由守卫 ​

beforeRouteEnter (to, from, next) ​

beforeRouteUpdate (to, from, next) ​

beforeRouteLeave (to, from, next) ​