目录
1. this.$router.push('Hash地址')
2. this.$router.replace('Hash地址')
一、导航 分为 声明式导航 和 编程式导航
1. 声明式导航
在浏览器中，点击链接实现导航的方式。例如：
普通网页中点击<a>链接，vue项目中点击<router-link>都属于声明式导航
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()
}
})