开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第1天，点击查看活动详情

路由的使用

路由的使用就是根据匹配的路径信息将正确的组件渲染到模板中定义的的位置。其中使用路由有两种方式：第一种是, 另外一种就是编程式路由。

路由使用的方式

1. router-link声明式路由

这种方式主要是通过router-link组件，配置to属性就可以实现路由的切换，router-link默认会渲染成a标签。

// 模板中使用router-link
<p>
  <router-link to="/home">home</router-link>
  <router-link to="/about">about</router-link>
</p>
<router-view></router-view>

// 配置的路由信息
routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

router-link组件中有很多属性，可以点击官网()查看

2. 编程式路由

编程式路由主要是借助router的实例上的方法来进行编程，点击按钮调用router实例上的方法从而实现路由的跳转。常用到的方法有下面几种。

2.1 router.push

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。其实对于上面的router-link来说，配置的to属性，内部也是调用router.push方法。

router.push主要有以下几种使用方式

<p>
  <button @click="linkToHome">home</button>
  <button @click="linkToAbout">about</button>
</p>
<router-view></router-view>

linkToHome () {
    // 字符串
    this.$router.push('home')
    // 对象
    this.$router.push({ path: 'home' })
  },
  linkToAbout () {
    const userId = '123'
    // 命名的路由
    this.$router.push({ name: 'about', params: {id: '123'} }) // /#/about/123
    // 带查询的参数
    this.$router.push({ path: 'about', query: {id: '123'} }) // /#/about?id=123

    this.$router.push({ name: 'about', params: { userId } }) // /#/about/123
    this.$router.push({ path: `/about/${userId}` }) // /#//about/123
    this.$router.push({ path: '/about', params: {userId} }) // /#/about
  }

上述代码中关于this.$router.push()里面的规则同样适用于router-link中的to属性。

2.2 router.replace

router.replace也可以实现路由的切换，只是它和router.push不同的是push会往history中添加新记录，而replace是会替换掉当前的history记录。

router.replace相当于给router-link组件添加replace属性。

<router-link to="/home" replace>home</router-link>

2.3 router.go

router.go是用来直接操作history记录的，接收一个整数作为参数。表示在history记录中向前或者向后退多少步，类似window.history.go(n)。

<button @click="forward">前进</button>
<button @click="back">后退</button>

forward () {
  this.$router.go(1)
  // 相当于
  // window.history.forward()
},
back () {
  this.$router.go(-1)
  // 相当于
  // window.history.back()
}

传入其他都数字

正数表示前进多少步，如果history记录不够用，那就会失败。负数表示后退多少步，如果history记录不够用，也会失败。

// 前进三步
this.$router.go(3)

// 后退三步
this.$router.go(-3)

路由信息的配置

配置路由的时候可以配置很多信息，主要涉及到下面几种：

1. 命名路由

命名路由其实就是给路由设置name属性，这样通过name属性也能获取到对应的路由信息，减少了代码。

路由信息配置

// 配置name属性
routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

使用

// 路由跳转的时候使用name直接跳转
this.$router.push({ name: 'home' })
<router-link to="{ name: 'home' }">home</router-link>

2. 命名视图

命名视图指的就是页面上需要多个展示区(也就是在多个router-view)的情况下，能够根据命名展示在对应的位置。

给视图命名

<h1>默认视图</h1>
<router-view></router-view>
<h1>a视图</h1>
<router-view name="a"></router-view>
<h1>b视图</h1>
<router-view name="b"></router-view>

配置路由的时候设置命名

一定要注意使用components而不是component。components的属性值是个对象，配置不同视图展示的组件

{
  path: '/home',
  name: 'home',
  components: {
    default: Home,
    a: HelloWorld,
    b: About
  }
}

展示效果如下：

企业微信截图_63622d3d-5ceb-4d75-8423-32164ce21da3.png

3. 重定向和别名

3.1 重定向

重定向指的就是当路径是当前路径的时候可以重新指定另外的路径。路由重定向是根据redirect属性来配置的。

redirect配置成字符串

{
  path: '/',
  redirect: '/home'
},

redirect配置成对象

{
  path: '/',
  redirect: {
    name: 'home'
  }
}

redirect配置函数

{
  path: '/',
  redirect: to => {
    // 接收目标路由to作为参数
    // 返回重定向的路径的字符串或者对象
    return '/home'
  }
}

3.2 别名

别名从字面理解就是给路径取一个绰号，在路由中指的就是当用户访问这个别名的时候，URL还是显示别名，但是路由匹配规则为实际的值。比如：/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。这点和重定向不同，“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b。

温馨提示：别名不是你随意设置的，想设成什么设置成什么，而是类似于你配置的其他路由的路径信息。“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

{
  path: '/',
  component: HelloWorld,
  alias: '/home'
}

上面这行代码，不论你访问的路径是'/'还是'/home'，最终渲染出来的组件都是HelloWorld，即使你下面重新配置了'/home'的路由信息

4. 路由元信息

路由元信息，指的就是给路由配置一些额外的自定义的信息，这是通过配置meta属性来实现的。

4.1 配置元信息

{
  path: '/home',
  name: 'home',
  components: {
    default: Home,
    a: HelloWorld,
    b: About
  },
  meta: {
    needLogin: true
  }
}

4.2 获取路由元信息

一般情况下配置的元信息主要是为了实现的路由的校验，因此通常是在全局守卫中获取元信息。

router.beforeEach((to, from, next) => {
  // 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组
  if (to.matched.some(record => record.meta.needLogin)) {
    // 是否登录，没有登录的话需要跳到登录页面
  } else {
    next()
  }
})

5. 路由懒加载

当项目构建的时候，js包很大，会影响页面的加载，如果我们根据路由将对应的组件打包成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就能大大提高性能，这就是路由的懒加载。

5.1 基础用法

定义组件的函数

将异步组件定义为返回一个Promise的工厂函数（该函数返回的Promise应该resolve组件本身）

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

引入组件

在webpack中，可以使用动态import语法来定义代码分块点

import('./Foo.vue')  // 返回Promise

简写形式

上述两个步骤其实就可以简写成下面这种形式

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

路由配置使用

{
  path: '/',
  name: 'Foo',
  component: Foo
}

5.2 把组件按组分块

如果我们想把某个路由下的所有组件都打包在同个异步块(chunk)中。只需要使用命名chunk。

const HelloWorld = () => import(/* webpackChunkName: "group-foo" */'@/components/HelloWorld')
const Home = () => import(/* webpackChunkName: "group-foo" */'@/components/Home')
const About = () => import(/* webpackChunkName: "group-foo" */'@/components/About')

这时候Webpack会将任何一个异步模块与相同的块名称组合到相同的异步块中。

动态匹配路由

动态路由指的就是路由规则不写死，可以根据实际情况进行动态匹配，主要涉及到以下几种情况：

1. 多种路由都映射到同一个组件

比如对于用户user组件，适用于很多不同的id用户，不同用户路径进来看到的页面信息是不同的，这种时候就可以使用这种方式。

// 路由配置
{
  path: '/user/:id',
  component: User
}

使用冒号标记路径参数，当匹配到一个路由的时候，参数值就会被设置到this. $route.params，可以在组件内部使用。上述代码中就可以通过 this.$ route.params.id 获取。比如： /user/foo ----> this.$route.params.id就是foo

除了设置一个路径参数，也可以在路由中设置多段路径参数。

{
  path: '/user/:id/log/:num',
  component: User
}

对应的值如下表所示

模式	匹配路径	$route.params
/user/:id	/user/foo	{id: 'foo'}
/user/:id/log/:num	/user/foo/log/2	{id: 'foo', num: 2}

2. 响应路由参数的变化

当我们切换路由的时候是渲染的同一个组件，这时候就不会触发生命周期的销毁和创建，这时候可能就不能拿到准确的路由参数，需要使用监听响应路由参数的变化。具体实现如下：

watch: {
  $route(to, from) {

  }
}

一定要注意的是监听的是$route，也就是当前路由信息对象。

当然这种场景下除了使用路由监听，也可以使用导航守卫来实现。下面会讲到导航守卫。

3. 捕获所有路由或404Not found路由

我们在实际项目开发的过程中，经常会需要对路由做一些拦截处理，比如登录鉴权，权限控制，404路由判断等。这些主要是通过全局守卫来控制的。其中404的问题除了全局守卫之外，也有一些简单地处理方式，但是不是很推荐。那就是使用通配符路由，这种模式下会匹配所有的页面，一般放在路由配置的最后，如果前面匹配不到也就是404的时候就会匹配到这个。

// 匹配所有路径
{
  path: '*'
}

// 匹配以'/user-'开头的任意路径
{
  path: '/user-*'
}

当使用一个通配符时，$route.params内会自动添加一个名为pathMatch参数。它包含了URL通过通配符被匹配的部分。

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

4. 匹配优先级

如果同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高

路由组件传参

路由组件传参的方式有很多，这里我们介绍常见的四种模式：

1. params在路径中显示参数

这种方式其实就是上面介绍的动态路由匹配的方式，路由规则里面用：路径参数, 组件中使用this.$route.params来获取

// 配置路由信息
{
  path: '/home/:id',
  component: Home
}

1.1 声明式

<router-link to="/home/my">home</router-link>

1.2 编程式

<button @click="linkToHome">home</button>

linkToHome () {
  // 字符串
  this.$router.push({ path: '/home/my' })
},

在home组件中获取参数

<template>
  <div class="home">
    我是home页面,{{ $route.params.id }}
  </div>
</template>

效果如下：

企业微信截图_aaf11127-ed1c-4edc-91db-5feb24883fd2.png

2. params在路径中不显示参数

这种方式也是使用this.$route.params来获取路由参数的，和上面一种方式相比，就是参数不会体现在页面路径上

// 配置路由信息
{
  path: '/home',
  name: 'home',
  component: Home
}

2.1 声明式

<router-link :to="{ name: 'home', params: {id: '123'}}">home</router-link>

2.2 编程式

linkToHome () {
  this.$router.push({
    name: 'home',
    params: {id: '123'}
  })
}

组件获取参数的方式和上面的一样

<template>
  <div class="home">
    我是home页面,{{ $route.params.id }}
  </div>
</template>

效果如下：

企业微信截图_2b00c306-f191-4ebd-b594-4ca2fc24fe26.png

需要注意的是这种情况下一定要使用name，而不能使用path，否则拿不到参数。因为配置了path, 会抛弃配置的params，这样this.$route.params就是一个{}。

3. query传参

query传参和params不同的是，最后参数会以？的形式拼接在路径的后面。组件获取参数是通过this.$route.query来获取的。

// 配置路由信息
{
  path: '/home',
  name: 'home',
  component: Home
}

3.1 声明式

<router-link :to="{ name: 'home', query: {id: '123'}}">home</router-link>

3.2 编程式

linkToHome () {
  this.$router.push({
    name: 'home',
    query: {id: '123'}
  })
}

需要注意的是使用query的时候，既可以配置成name,也可以配置path，都会生效

组件获取参数信息

<template>
  <div class="home">
    我是home页面,{{ $route.query.id }}
  </div>
</template>

效果如下：

企业微信截图_b4f8ff38-c1c2-48db-a11c-3038332cd002.png

4. props解耦

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。使用props可以将组件和路由解耦。与其说使用props来传递参数，更多的是被用来作为解耦使用。

这种情况是通过在配置路由的时候配置props属性来实现的，props一共有三种形式：布尔值，对象和函数

4.1 布尔值

如果 props 被设置为 true，route.params 将会被设置为组件属性。这种方式对应的是上面介绍的params在路径上显示参数的解耦。

配置路由信息

{
  path: '/home/:id',
  name: 'home',
  component: Home,
  props: true
}

组件中获取路由信息

<template>
  <div class="home">
    我是home页面,{{ id }}
  </div>
</template>

<script>
export default {
  name: 'Home',
  props: ['id'],
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

效果如下：

企业微信截图_03fc00ac-67ac-4161-998a-c0fad2cee22f.png

4.2 对象

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。这种方式有个问题就是必须在路由配置的时候把参数写进去。

配置路由信息

{
  path: '/home',
  name: 'home',
  component: Home,
  props: {
    id: '123'
  }
}

组件中获取路由信息

<template>
  <div class="home">
    我是home页面,{{ id }}
  </div>
</template>

<script>
export default {
  name: 'Home',
  props: ['id'],
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

效果如下：

企业微信截图_c7d8de7b-5312-47ed-8f55-b48b84213bd8.png

4.3 函数

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。这种方式对应的是上面介绍的params在路径上不显示参数的解耦，也可以对应query传递参数的解耦。

配置路由信息

{
  path: '/home',
  name: 'home',
  component: Home,
  props: route => ({ id: route.query.id })
}

获取组件参数信息

<template>
  <div class="home">
    我是home页面,{{ id }}
  </div>
</template>

<script>
export default {
  name: 'Home',
  props: ['id'],
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

效果如下：

企业微信截图_e6388726-ecd4-4c22-a3fb-345ad655d1e9.png

5. 其他方式

除了上面四种方式之外，还有其他的两种方式:

vuex: a组件更改state的状态值，b组件获取state的状态值
本地存储: 所有的本地存储都可以，a组件存缓存，b组件读取缓存里的值

路由的两种模式

路由有两种模式：hash模式和history模式。可以通过路由中的mode配置项来配置，默认是hash.

const router = new VueRouter({
  mode: 'history',
  routes: [
  ]
})

1. hash模式

vue中默认的路由模式就是hash模式，这种模式下的url是带有#的，其中#后面的就是hash，比如：http://localhost:8080/#/home?id=123

hash模式的原理

hash模式的原理就是浏览器的onhashchange()事件。当hash值改变的话不会向服务端发送请求，浏览器自己就会监听事件的变化，并根据hash值的变化加载对应的代码，这也就是前端路由。而且hash值发生变化的url都会被浏览器记录下来，因此当点击浏览器前进后退的时候也不用请求服务端。

hash模式的特点

不用请求服务器
浏览器兼容性好

2. history模式

hash模式下传递参数是放在url中传递的，而且有体积限制，还不能传递对象。而history模式就可以传递对象。 history模式下的url是不带#号的，看起来比较好看一点。比如：http://localhost:8080/home?id=123

history模式的原理

history模式的原理其实就是调用了html5的history内置对象，然后进行了一些封装操作。history主要是通过以下两个api来实现在不进行刷新的情况下，操作浏览器的历史记录：history.pushState()和history.replaceState()

history模式的特点

history模式需要后台配合，需要通过服务器来允许地址可访问。如果后台（nginx）没有正确配置，访问时就会返回404.
更新路由不会发送http请求，但是刷新页面会
通过history.state，添加任意类型的数据到记录中
浏览器兼容性不是很好

路由守卫

路由守卫的作用是在进入路由之前或者之后判断是否符合条件，从而决定是否可以正常进入路由。包含很多类型，有的是全局的，有的是组件内部的。

全局守卫

全局守卫是所有的路由在进入之前都会进行的守卫，只有通过了守卫才会进入路由独享的或者组件内部的守卫。全局守卫一共分为三种情况：全局前置守卫，全局解析守卫，全局后置钩子。全局守卫是在创建完router对象之后配置。

1. 全局前置守卫

1.1 基本用法

全局前置守卫是通过router.beforeEach()来注册的。里面接收三个参数：

to: route，表示即将要进入的目标路由对象
from: route，表示当前导航正要离开的路由对象
next: function，表示继续执行。必须要执行这个方法，否则路由不会跳转其中next()可以包含这些参数：
next(): 表示继续执行
next(false): 中断当前的导航。如果浏览器的url改变了，那么url地址会重置到from路由对应的地址
next('/')或next({path: '/'}): 中断当前的导航，然后进行一个新的导航
next(error): 导航会被终止且该错误会被传递给router.onErrror()注册过的回调。

    router.beforeEach((to, from, next) => {
      next();
    })

全局前置守卫通常用来做登录拦截。

2. 全局解析守卫

全局解析守卫和全局前置守卫类似，也是可以接收三个参数: to, from, next。具体使用可以参考上面的写法。

router.beforeResolve((to, from, next) => {
  console.log('beforeResolve')
  next()
})

和全局前守卫的区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，才会被调用。

3. 全局后置钩子

全局后置钩子不能称作守卫，因为它是在进去路由之后执行的，所以没有守卫这一说法，之所以称之为钩子，是因为在这一步可以执行对应的操作。和守卫还有一个不同之处就是没有next函数，只接收to和from两个参数。

router.afterEach((to, from) => {
  console.log('afterEach')
})

路由独享的守卫

路由独享的守卫是在路由配置的时候配置在路由对象中的，属性为beforeEnter，它的参数和全局路由的参数一样，为to, from, next。

{
  path: '/home',
  name: 'home',
  component: Home,
  props: route => ({ id: route.query.id }),
  beforeEnter: (to, from, next) => {
    console.log('beforeEnter')
    next()
  }
}

路由独享守卫一般用于部分路由的登录拦截。

组件内的守卫

组件内的守卫是在组件内部配置的。一共有三种路由导航守卫：

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

1. beforeRouteEnter

在渲染该组件的对应路由被确认前调用

  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    console.log(this)
    next()
  }

需要注意的是：当守卫执行之前，组件实例还没被创建，因此不能获取组件实例this，效果如下：

正是由于beforeRouteEnter不能访问this，所以此时的next里支持传一个回调来访问组件实例。这是唯一一个在next中支持回调的守卫。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

组件内的beforeRouteEnter守卫一般用于权限管理

2. beforeRouteUpdate

一般是在动态路由匹配的时候才会被调用，也就是说路由里面含有:路由参数，如：/home/:id，这种路由下是会存在组件复用，但是路由改变的情况，也就可以执行当前路由守卫.

  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
    console.log(this)
    next()
  }

此时组件已经被创建好了，因此可以获取this，效果如下：

3. beforeRouteLeave

这个导航守卫是在导航离开该组件的对应路由时调用的

  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    console.log(this)
    next()
  }

这个阶段的路由守卫也是可以获取this的。

完整的导航解析流程

上述路由钩子在一次完成的流程中执行顺序如下图：

具体解析过程如下：

导航被触发
在失活的组件里调用beforeRouteLeave守卫
调用全局的beforeEach守卫
在重用的组件里调用beforeRouteUpdate守卫
在路由配置里调用beforeEnter
解析异步路由组件
在被激活的组件里调用beforeRouteEnter
调用全局的beforeResolve守卫
导航被确认
调用全局的afterEach钩子
触发DOM更新
调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入

路由的交互样式

1. 过渡动效

过渡效果主要是使用transition标签包裹，主要分为以下三种情况：

1.1 给所有的路由都加上过渡效果

给所有的路由都加上过渡效果的话那就直接给router-view添加transition标签，因为所有的组件都将从这里渲染出来。

<transition>
  <router-view></router-view>
</transition>

1.2 给单个路由加过渡效果

给单个路由添加过渡效果只需要给当前路由对应的组件添加transition标签。

<transition name="fade">
      <div class="bar">...</div>
    </transition>

1.3 基于路由的动态过渡

基于当前路由与目标路由的关系，动态设置过渡效果，需要监听路由的变化，如果路由满足我们想要过渡的效果，那么就添加transition标签。

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length;
    const fromDepth = from.path.split('/').length;
    this.transitionName = toDepth &lt; fromDepth ? 'slide-right' : 'slide-left';
  }
}

2. 滚动行为

这个滚动行为指的是当我们切换路由的时候，默认指定路由页面滚动到对应的位置，比如滚到顶部或者保持原先滚动的位置，可以通过在路由对象中配置scrollBehavior。

2.1 基本用法

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

其中scrollBehavior接受三个参数：

to: 路由对象
from: 路由对象
savedPosition: 返回滚动位置的对象信息的方法（当且仅当popstate导航(通过浏览器的前进/后退按钮触发)）时才可用

其中滚动位置的对象结构如下：

   {x: 0, y: 0}

模拟锚点导航

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

2.2 异步滚动

当滚动效果和过渡一起使用的时候，需要将滚动设置为异步滚动，内容如下：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

2.3 平滑滚动

如果想要让滚动不那么生硬，可以在scrollBehavior内部设置behavior属性来控制

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth',
    }
  }
}

3. 故障处理

我们在开发的时候是会结合路由守卫来控制页面的访问权限，如果存在下面这些情况是会存在导航故障的。

用户已经位于他们正在尝试导航到的页面
一个导航守卫通过调用 next(false) 中断了这次导航
一个导航守卫抛出了一个错误，或者调用了 next(new Error())

当使用 router-link 组件时，这些失败都不会打印出错误。然而，如果你使用 router.push 或者 router.replace 的话，可能会在控制台看到一条 "Uncaught (in promise) Error" 这样的错误，后面跟着一条更具体的消息。

处理方案

不论哪种情况，导航都是一个Error实例，要检查一个错误是否来自于路由器，可以使用 isNavigationFailure 函数。

import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter

// 正在尝试访问 admin 页面
router.push('/admin').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
    // 向用户显示一个小通知
    showToast('Login in order to access the admin panel')
  }
})

其中isNavigationFailure的参数如下：

failure：错误对象，里面会有to和from属性，分别用来表示这次失败的导航的目标位置和当前位置。
NavigationFailureType：导航故障类型，一共有下面几种情况
- redirected：在导航守卫中调用了 next(newLocation) 重定向到了其他地方。
- aborted：在导航守卫中调用了 next(false) 中断了本次导航。
- cancelled：在当前导航还没有完成之前又有了一个新的导航。比如，在等待导航守卫的过程中又调用了 router.push。
- duplicated：导航被阻止，因为我们已经在目标位置了。

vue2之路由的使用详解

路由的使用

路由使用的方式

1. router-link声明式路由

2. 编程式路由

2.1 router.push

2.2 router.replace

2.3 router.go

路由信息的配置

1. 命名路由

2. 命名视图

3. 重定向和别名

3.1 重定向

3.2 别名

4. 路由元信息

4.1 配置元信息

4.2 获取路由元信息

5. 路由懒加载

5.1 基础用法

5.2 把组件按组分块

动态匹配路由

1. 多种路由都映射到同一个组件

2. 响应路由参数的变化

3. 捕获所有路由或404Not found路由

4. 匹配优先级

路由组件传参

1. params在路径中显示参数

1.1 声明式

1.2 编程式

2. params在路径中不显示参数

2.1 声明式

2.2 编程式

3. query传参

3.1 声明式

3.2 编程式

4. props解耦

4.1 布尔值

4.2 对象

4.3 函数

5. 其他方式

路由的两种模式

1. hash模式

hash模式的原理

hash模式的特点

2. history模式

history模式的原理

history模式的特点

路由守卫

全局守卫

1. 全局前置守卫

1.1 基本用法

2. 全局解析守卫

3. 全局后置钩子

路由独享的守卫

组件内的守卫

1. beforeRouteEnter

2. beforeRouteUpdate

3. beforeRouteLeave

完整的导航解析流程

路由的交互样式

1. 过渡动效

1.1 给所有的路由都加上过渡效果

1.2 给单个路由加过渡效果

1.3 基于路由的动态过渡

2. 滚动行为

2.1 基本用法

2.2 异步滚动

2.3 平滑滚动

3. 故障处理

处理方案