路由 vue-router

2020-03-17 本文已影响0人 moofyu

this.$router和this.$route的区别是什么？

this.$router：VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等
this.$route：当前激活的路由信息对象，只读、可以 watch，包含path、params、hash、query、fullPath、matched、name、meta等路由信息参数

vue-router 的路由跳转的方法

第一种 : 编程式的导航

<router-link to="/" tag="p">耳机频道</router-link>
//to是一个prop.指定需要跳转的路径,也可以使用v-bind动态设置
//tag可以指定渲染成标签,默认是a标签
<router-link to="/" replace>跳转回去</router-link>  
//这样的写法是不会留下历史痕迹,回退键无效
<router-link :to="{ name: 'product', params: { id : 1 }}">User</router-link>
// /product/1

第二种 : 函数式的导航

//这里假设 我要跳转product页面并且附带参数id 
//这里定义好了list.id 就是 动态的值
this.$router.push('./product/' + list.id)            // 字符串的方式进行描述
this.$router.push({name : 'product',params: { id : list.id }})  // 命名的路由的方式进行描述
this.$router.push({ path: `/product/${list.id}` })        // 直接定义path类似第一种
//比较常用的跳转路由的方法
//假如是带查询参数
this.$router.push({ path: 'product', query: { id: list.id }})      // /product?id=1

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击<router-link :to="..."> 等同于调用 router.push(...)。
值得注意的一点是,如果提供了 path，params 的配置将不会生效

还有一些方法

router.replace   //它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
router.go(1)    //在浏览器记录里面前进一步,等于history.forward()
router.go(-1)    //后退一步记录，等同于 history.back()
router.go(n)    //浏览器记录前进3步

导航守卫

全局的
单个路由独享的
组件内

全局的

路由实例上直接操作的钩子函数，所有路由配置的组件都会触发

beforeEach：在路由跳转前触发，参数包括to,from,next，钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。
beforeResolve ：路由跳转前触发，参数包括to,from,next，在 beforeEach 和组件内beforeRouteEnter 之后，afterEach之前调用。
afterEach：在路由跳转完成后触发，参数包括to,from没有了next,它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。

路由独享的

beforeEnter：单个路由配置的时候设置的钩子函数

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的

在组件内执行的钩子函数，相当于为配置路由的组件添加的生命周期钩子函数。

<template>
  ...
</template>
export default{
  data(){
    //...
  },
  beforeRouteEnter (to, from, next) {
  },
  beforeRouteUpdate (to, from, next) {
  },
  beforeRouteLeave (to, from, next) {
  }
}
<style>
  ...
</style>

beforeRouteEnter：路由进入之前调用，该守卫内访问不到组件的实例，也就是this为undefined，也就是它在beforeCreate生命周期前触发。
在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作，（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）

 beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate (v 2.2+)：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。 what is 路由改变 or what is 组件被复用？
- 对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用
- 当前路由query变更时，该守卫会被调用
beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

导航守卫回调参数

to：目标路由对象；
from：即将要离开的路由对象；
next：确保要调用 next 方法，否则钩子就不会被 resolved。

next()：才能继续往下执行下一个钩子
next(false)：中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
在 beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。
next(error): (v2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

执行顺序

当点击切换路由时：

beforeRouterLeave： $\color{Blue}{组件路由守卫}$
beforeEach： $\color{ForestGreen}{全局前置守卫}$
beforeEnter： $\color{Coral}{路由独享守卫}$
beforeRouteEnter： $\color{Blue}{组件路由守卫}$
beforeResolve： $\color{ForestGreen}{全局解析守卫}$
afterEach： $\color{ForestGreen}{ 全局后置守卫}$
beforeCreate：组件生命周期
created：组件生命周期
beforeMount：组件生命周期
mounted：组件生命周期
beforeRouteEnter的next的回调： $\color{Blue}{组件路由守卫}$