声明式导航&编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。如：
在浏览器中，调用API方法实现导航的方式，叫做编程式导航。如：location.href

常见的编程式导航API

1. this.$router.push(“hash地址”)
   跳转到指定hash地址，并增加一条历史记录
2. this.$router.replace(“hash”)
   跳转到指定的hash地址，并替换掉当前的历史记录
3. this.$router.go(“数值”)
   调用该方法可以在浏览历史中前进或后退，go(-1)表示后退一层，如果超过，则原地不动
   简化用法：

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

导航守卫

导航守卫可以控制路由的访问权限。

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制。调用路由实例对象的foreach方法，即可声明全局前置守卫，只要发生了路由跳转，就必然会触发fn

// 创建路由的实例对象
const router = new VueRouter()

// 声明全局前置导航守卫，只要发生路由跳转，必然会触发fn
router.beforeEach(fn)

守卫方法的3个形参

• to是将要访问的路由的信息对象，目的地
  

• from是将要离开的路由的信息对象，来源
  

• next是一个函数，调用next()表示放行，允许此次路由导航
  如果在回调函数fn中没有调用next函数的话，则表示所有的路由导航都不允许，效果如下：
  

next函数的三种调用方式

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

控制访问权限

1. 拿到用户将要访问的hash地址：to.path
2. 判断hash地址是否等于’/main’
   • 如果等于则需要判断是否登录
   • 不等于则直接放行：next()
3. 如果等于，则需要读取localStorage中的值：localStorage.getItem('token')
   • 如果没有token则强制停留在登录页面
   • 如果有，则直接放行

router.beforeEach(function(to,from,next){
    // 1.拿到用户将要访问的hash地址
    var path = to.path
    // 2.判断hash地址是否等于/main，如果等于则需要判断是否登录,不等于则直接放行
    if(path==='/main'){
        // 3.如果访问的地址是/main，则需要读取localStorage中的值，有则放行，无则强制跳转
        const token = localStorage.getItem('token')
        console.log(token)
        if(token){
            next()
        }else{
            next('/login')
        }
    }else{
        next()
    }
})