2024年Vue Router 导航守卫快速了解与上手应用_快应用导航守卫，阿里秋招面试真题解析

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
Vue.config.productionTip = false

// 添加全局前置守卫
router.beforeEach((to,from,next)=>{
console.log(to,from,next);
next();
})

new Vue({
router,
store,
render: h => h(App)
}).$mount(‘#app’)

可以看到，写法如下：

router.beforeEach((to,from,next)=>{
console.log(to,from,next);
next();
})

看控制台输出，to,from,next代表什么：


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210712165752760.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc=,size_16,color_FFFFFF,t_70#pic_center)


看得出to、from都是对象，next为方法。还是直接上概念，其中to、from、next 参数意思如下：




| 参数 | 意义 |
| --- | --- |
| to | 代表将要跳到哪个路由 |
| from | 代表之前是来自哪个路由 |
| next（） | 进行正常跳转 |
| next（false） | 取消跳转 |
| next（“路径”）或者next({ path: ‘路径’ }) | 路由重定向，跳转到其它页面 |


 需要注意的是，要确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。


**如，我现在要实现无法跳转到login页面，其它页面能正常跳转，应该如下实现：**

router.beforeEach((to,from,next)=>{
//如果将要跳到login，则取消跳转
if(to.path==‘/login’){
next(false);
}else{
// 否则正常跳转
next();
}
})

效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210712170234849.gif#pic_center)  
 现在，用全局前置守卫实现第一大点那个小案例：

router.beforeEach((to,from,next)=>{
if(to.path == ‘/user’){
if(localStorage.getItem(“token”)){
next();
}else{
next(‘/login’);
}

}else{
next();
}
})

看，也是一样可以的：


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210712183520736.gif#pic_center)  
 假如现在进入about页面也要登录才能进，则如下直接在 if 里添加一个或条件就好：

router.beforeEach((to,from,next)=>{
if(to.path == ‘/user’ || to.path == ‘/about’){
if(localStorage.getItem(“token”)){
next();
}else{
next(‘/login’);
}

}else{
next();
}
})

##### 2. 路由守卫：


 运行在路由上的守卫，只有进入到当前路由页面的时候才会执行的守卫函数，叫做 beforeEnter。它一般直接在路由配置里写的。


如我在/user的配置对象里写，只有在user页面这个守卫在生效：

const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path:‘/login’,
component: Login
},
// 在user这里面写
{
path:‘/user’,
component:User,
beforeEnter: (to, from, next) => {
// 输出看看
console.log(to,from,next);
}
},
{
path: ‘/about’,
name: ‘About’,
component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
}
]

看效果，只有在点击user页面才会有输出：


![在这里插入图片描述](https://img-blog.csdnimg.cn/2021071220224162.gif#pic_center)  
  这些守卫与全局前置守卫的方法参数是一样的。用法也是差不多一样的 。现在在路由守卫里实现第一大点的案例：

const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path:‘/login’,
component: Login
},
// 在user这里面写
{
path:‘/user’,
component:User,
beforeEnter: (to, from, next) => {
if(localStorage.getItem(‘token’)){
next();
}else{
next(‘/login’);
}
}
},
{
path: ‘/about’,
name: ‘About’,
component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
}
]

效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210712204407406.gif#pic_center)


##### 3.组件内守卫：


可以在路由组件内直接定义以下路由导航守卫：




| 名称 | 调用时期 |
| --- | --- |
| beforeRouteEnter | 进入组件之前执行 |
| beforeRouteUpdate | 组件复用时执行 |
| beforeRouteLeave | 离开组件之前执行 |


 它们也是函数，跟生命周期钩子函数有点像，跟data（）、created（）这些函数也是同一个级别的。它既然是写在组件里的，那说明它也是在该组件中有效的。比如在user.vue页面写：


**beforeRouteEnter：**

个人信息页面

账号：{{ username }}

博客：北极光之夜。

 这些守卫与全局前置守卫的方法参数也是是一样的。现在我们同样实现第一大点的小案例，在这之前需要注意的是不能获取组件实例的this，因为当守卫执行前，组件实例还没被创建：

// 进入组件之前调用
beforeRouteEnter(to, from, next) {
if (to.path == “/user”) {
if (localStorage.getItem(“token”)) {
next();
} else {
next(“/login”);
}
}
},

一样的效果：


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210712222030870.gif#pic_center)  
 **beforeRouteLeave：**


 接下来使用 **beforeRouteLeave**，它类似于生命周期函数的beforeDestroy，表示离开该组件时执行的守卫函数。离开就是说我要去其它页面了，比如跳去home页面，注意如果没有调用next将离不开该组件。方法参数也是一样的：

它有什么使用场景呢？


 比如因为用户误触使得要离开这个页面时，可以通过beforeRouteLeave函数跳出一个提示框，提示是否真的离开该页面（提示离开可能不会保存当前页面用户的输入的信息等）。实现如下：

个人信息页面

账号：{{ username }}

博客：北极光之夜。

输入1：

输入2：

输入3：

window.confirm() 方法方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。


运行效果：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210712232551593.gif#pic_center)  
 **beforeRouteUpdate**：


 在组件复用时执行beforeRouterUpdate，什么是复用呢？当**连续**进入同一个动态路由页面时会产生复用。  
  什么是动态路由呢？如果某些路由规则的一部分是一样的，只有另一部分是动态变化的，那我们可以把这些动态变化的部分形成路由参数，这些参数就叫做动态路由匹配。[动态路由请看这篇文章第五点](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)：https://auroras.blog.csdn.net/article/details/117635206，这里就不细说了。


首先，在项目新建一个 details.vue文件，做为详情页，然后配置动态路由规则：

{
path:‘/details/:id’,
component: Details
},

然后添加两个路由链接：

…略
详情1 |
详情2 |
…略

 效果如下，此时**连续进入**就发生了组件的复用，它们显示的其实都是details.vue文件。因为是复用，vue为了节省性能将会导致该组件生命周期钩子函数并**不会**再重头开始创建执行，所以这时beforeRouteUpdate就很有用处了：


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210713140159513.gif#pic_center)  
 设置beforeRouteUpdate守卫函数，details.vue文件内容如下：


### 文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。



个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)



第二阶段:移动端开发技术

![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)

第三阶段:前端常用框架

![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。



://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)

第三阶段:前端常用框架

![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。