2-20-编程式导航

什么是编程式导航

前一节课使用的路由基本上都是声明式导航，明确指定了路由的跳转路径。

但我们同时也能够通过代码来控制导航

常用函数

编程式导航的函数都存放于$router里面，常见的有以下几种：

1. push

用于前进到hash地址指定的页面，会留下历史记录

this.$router.push('/about');

2. replace

用于前进到hash地址指定的页面，但会替代掉之前的历史记录

this.$router.replace('/about');

3. go

通过传入的数值跳转到对应页面，正数前进，负数后退

this.$router.go(-2);

还有两个简化的函数，可以直接退1或进1

1. back

2. forward

注意：在html属性中引用函数前面不能加this

<button @click="$router.back()">后退</button>

导航守卫

用于设置访问权限，避免后台页面被访问者看到。

其中最常用的就是全局前置守卫，它的格式如下：

const router = new VueRouter();

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

//to 保存着即将前往的路由信息

//from 保存着即将离开的路由信息

//next 是一个操作函数

});

如果想要组织访问者访问后台，可以调用next函数。

next('/login') // 表示跳转到Login页面上

next(false) // 表示拒绝访问请求

next() // 表示允许访问

因此想要实现一个导航守卫

首先要在主页面上定义访问后台页面的跳转链接

<router-link to="/main">访问后台主页</router-link>

然后在路由中添加Main和Login两个页面

import Main from '@/components/Main.vue';

import Login from '@/components/Login.vue';

{ path: '/main', component: Main },

{ path: '/login', component: Login }

最后在路由中增加导航守卫规则
`
``
router.beforeEach(function(to, from, next) {

if (to.path !== “/main”) { //通过to.path检验访问的路径是否是/main

next(); //如果不是访问后台页面就直接pass

return;

}

const token = localStorage.getItem(“token”);

if (!token) {

next(‘/login’);

return;

}

next();

})

参考：

[Vue2.0-15.编程式导航跳转 -
push、replace、go](https://www.bilibili.com/video/BV1zq4y1p7ga?p=190&share_source=copy_web)

[Vue2.0-16.导航守卫 -
了解导航守卫的基本用法](https://www.bilibili.com/video/BV1zq4y1p7ga?p=191&share_source=copy_web)

[Vue2.0-17.导航守卫 -
next函数的三种调用方式](https://www.bilibili.com/video/BV1zq4y1p7ga?p=192&share_source=copy_web)

[Vue2.0-18.导航守卫 -
控制访问权限](https://www.bilibili.com/video/BV1zq4y1p7ga?p=193&share_source=copy_web)