Vue-router编程式导航及路由导航守卫

1.route 和 router的区别

this.$route  是路由的 “参数对象”
this.$router 是路由的 “导航对象”

路径参数和查询参数：

在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数
使用 this.$route.query 来访问查询参数

	<!-- 注意1：在 hash 地址中， / 后面的参数项，叫做“路径参数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 -->

    <!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 -->

    <!-- 注意3：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 -->
    <!-- 例如： -->
    <!-- /movie/2?name=zs&age=20 是 fullPath 的值 -->
    <!-- /movie/2 是 path 的值 -->
    <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2?name=zs&age=20">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>

2.编程式导航

2.1声明式导航 & 编程式导航

2.2vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router.push('hash 地址'): 跳转到指定 hash 地址，并增加一条历史记录
② this.$router.replace('hash 地址'): 跳转到指定的 hash 地址，并替换掉当前的历史记录
③ this.$router.go(数值 n): 实现导航历史前进、后退

push 和 replace 的区别：

push 会增加一条历史记录
replace 不会增加历史记录，而是替换掉当前的历史记录

$router.go 的简化用法:

① $router.back() 在历史记录中，后退到上一个页面
② $router.forward() 在历史记录中，前进到下一个页面

3.params和query传参的区别

用params传参，F5强制刷新参数会被清空，参数不会显示到路径上。路由配置时要在path属性值得后面加‘/?*’ 例如：/:id

用query，由于参数适用路径传参的所以F5强制刷新也不会被清空，参数会显示到路径上

3.1 params传参刷新数据会消失怎么解决：
1.在 created 生命周期时，localstroage 先缓存数据，在页面销毁时删除缓存

created() {
    let rowData = localStorage.getItem('rowData')
    if(rowData) {
      this.row = this.$route.params.row
      localStorage.setItem('rowData', JSON.stringify(this.$route.params.row))
    }
  },
  beforeDestory() {
    localStorage.removeItem('rowData')
  }

2使用 Vuex 仓库存储数据

4.路由导航守卫

导航守卫可以控制路由的访问权限。示意图如下：

4.1 全局前置守卫及三个参数

为 router 实例对象，声明全局前置导航守卫
只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数

控制后台主页的访问权限

router.beforeEach(function(to, from, next) {
// to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  // 分析：
  // 1. 要拿到用户将要访问的 hash 地址
  // 2. 判断 hash 地址是否等于 /main。
  // 2.1 如果等于 /main，证明需要登录之后，才能访问成功
  // 2.2 如果不等于 /main，则不需要登录，直接放行  next()
  // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值
  // 3.1 如果有 token，则放行
  // 3.2 如果没有 token，则强制跳转到 /login 登录页
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next()
  }
})

4.2 next 函数的 3 种调用方式

当前用户拥有后台主页的访问权限，直接放行：next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面：next(’/login’)
当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)