11. Vue-router 路由导航

目录

一、导航 分为 声明式导航 和 编程式导航

1. 声明式导航

2. 编程式导航

二、vue-router 常用的导航API

1. this.$router.push('Hash地址')

2. this.$router.replace('Hash地址')

3. this.$router.go(数值n)

4. this.$router.go() 的简写

三、导航守卫

1. 全局前置守卫

2. next  函数的3中调用方式

3. 控制用户的访问权限

---

一、导航 分为 声明式导航 和 编程式导航

1. 声明式导航

在浏览器中，点击链接实现导航的方式。例如：

普通网页中点击链接，vue项目中点击都属于声明式导航

2. 编程式导航

调用API方法实现导航的方式。例如：

普通网页中调用location.href 跳转到新页面的方式，属于编程式导航

---

二、vue-router 常用的导航API

1. this.$router.push('Hash地址')

跳转到指定的Hash地址，并增加一条历史记录

2. this.$router.replace('Hash地址')

跳转到指定的Hash地址，并替换掉当前的历史记录

3. this.$router.go(数值n)

可以在浏览历史中前进和后退。

this.$router.go(-1) 表示后退一步

4. this.$router.go() 的简写

this.$router.back() 后退

this.$router.forward() 前进

---

三、导航守卫

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

 

1. 全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

1） 创建VueRouter实例对象

const router = new VueRouter({})

2）为router 实例对象，声明全局前置导航守卫

只要发生了路由跳转，必然会触发beforeEach 指定的 function回调函数

router.beforeEach(function(to, from, next){

  // to 表示将要访问的路由的信息对象

  // from 表示将要离开的路由的信息对象

  // next() 函数表示放行的意思

  next()

})

2. next  函数的3中调用方式

 

3. 控制用户的访问权限

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

控制用户登入后台主页的权限

思路分析：

1、首先要拿到用户将要访问的Hash地址

2、判断Hash地址是否等于 /main

        2.1 如果等于 /main,证明需要登录之后才可以访问成功

        2.2 如果不等于 /main, 则不需要登录，直接放行 next()

3、如果访问的地址是 /main ，则需要读取 localStorage 中的token 值

        3.1 如果有token 值，说明用户已经登陆过了， 直接方形 next()

        3.2 如果没有token，则强制用户跳转到 /login 登录页面

 router.beforeEach(function(to, from, next){

  if(to.path === '/main') {

    // 要访问后台主页，需要判断是否有token

    const token = localStorage.getItem('token')

    if(token) {

      next()

    } else {

      // 如果没有token，则强制跳转到登录页

      next('/login')

    }

  } else {

    next()

  }

})