# 导航

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

在浏览器中，点击链接实现导航的方式，叫做声明式导航.

• 在普通网页中点击标签，vue 项目中点击都属于声明式导航

在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航

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

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

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

1. this.$router.push (‘hash 地址’)

   1 2 3 4

   goLokiByPush() { //push()方法会在浏览器中留下历史记录 this.$router.push('/movie/1') }

2. this.$router.replace (‘hash 地址’)

   1 2 3 4

   goLokiByReplace() { //replace()方法不会在浏览器中留下历史记录 this.$router.replace('/movie/1') }

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

** 注意 : ** this.$route 是路由的参数对象， this.$router 是路由的导航对象

# 导航守卫

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

# 全局前置守卫

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

1
2
3
4
5

const router = new VueRouter({ ... })

// 调用路由实例对象的beforeEach方法, 即可声明"全局前置守卫"
// 每次发生路由导航跳转的时候, 都会自动触发fn这个"回调函数"                              
router.beforeEach(fn)

# 守卫方法的三个形参

1
2
3
4
5
6
7

const router = new VueRouter({ ... })
                              
router.beforeEach((to, from, next) => {
    // to 是将要访问的路由的信息对象
    // from 是将要离开的路由的信息对象
    // next 是一个函数, 调用 next() 表示放行, 允许这次路由导航
})

# next 函数的三种调用方式

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