Vue-router 知识点

1.$route 与 $router 区别

　　router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面含有汗多属性和子对象，例如 history 对象，经常用的跳转链接就可以用this.$router.push()和router-link跳转一样，它是一个路由对象，可以方便的使用JS代码实现编程式路由导航，例如页面的前进、后退、跳转等

　　route 是路由参数对象。相当于当前正在跳转的路由对象。可以从里面获取 name、path、params、query 等

　　router 是用来发送的 ，route 是用来接收的

 

路由跳转

// 字符串
this.$router.push('user')
// 对象
this.$router.push({path: 'user'})
// 命名的路由，查找 name
this.$router.push({name: 'user', params: {id: 1}})// /user/111
// 带参数 变成 /user?id=111
this.$router.push({path: 'user', query: {id: '111'}})
// 如果提供了 path ，params 会被忽略。上述例子中的 query 并不属于这种情况，

// 这里的 params 不生效 变成 /user
this.$router.push({path: 'user', params: {id: 111}})
// 变成 /user/111
this.$router.push({name: 'user', params: {id: 111}})

最后一个，和这个相同意思，都是使用命名路由

<router-link :to='{name: "user", params: {id: 111}}'>User</router-link>

 

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

 

2.导航守卫

　　当一个导航触发时，全局前置守卫按照创建顺序调用，守卫时异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

　　每个守卫接收三个参数：

　　　　to　　即将要进入的目标路由对象

　　　　from　　当前导航正要离开的路由

　　　　next　　一定要调用这个方法来 resolve 这个钩子。依赖 next 中的参数

　　　　　　next()　　进入管道中的下一个钩子。全部钩子执行完，则导航的状态就是 confirmed （确认的）

　　全局前置守卫 router.beforeEach

    
    router.beforeEach((to, from, next) => {
      next()// 进入管道中的下一个钩子
      // next(false);// 中断当前导航
      // next('/');或者 next({path: '/'})// 跳转到一个不同的地址，当前导航被中断，然后进行一个新的导航
      // next(error);// 如果传入 next 的参数是一个 error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调
    })

 

　　全局后置钩子

this.$router.afterEach((to, form) => {
  // ...
})

　　

　　路由独享守卫

const router = new VueRouter({
  routes: [
    {
      path: 'index',
      component: Home,
      beforeEnter(to, form, next) {
        // ...
      }
    }
  ]
})

 

 　　组件内的守卫

  beforeRouteEnter(to, from, next) {
    // 这里面的组件实例还没有被创建，所以不能访问实例 this
    next(vm => {
      // 可以通过 vm 访问组件实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    console.log(this.$route.params)// 没有值
    next()
    console.log(this.$route.params)
    // 在使用这个守卫时，应该等 next() 函数执行之后在获取 params 或 query 数据
    // 在当前路由改变，该时该组件被复用时调用，可以访问实例 this
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用，可以访问组件实例 this
    //  这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
    const answer = window.confirm('确认要离开么？还有为保存的内容！')
    if (answer) {
      next()
    } else {
      next(false)
    }
  },
  methods: {

 

 　　完整的导航解析流程

　　　　1.导航被触发

　　　　2.在失活的组件里调用 beforeRouteLeave 守卫

　　　　3.调用全局的 beforeEach 守卫

　　　　4.在重用的组件里调用 beforeRouteUpdate 守卫

　　　　5.在路由配置里调用 beforeEnter 

　　　　6.解析异步路由组件

　　　　7.在被激活的组件里调用 beforeRouteEnter 

　　　　8.调用全局的 beforeResolve 守卫（2.5 才添加）

　　　　9.导航被确认

　　　　10.调用全局的 afterEach 钩子

　　　　11.触发 DOM 更新

　　　　12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。