2024年Web前端最新Vue Router 导航守卫快速了解与上手应用_快应用导航守卫，web应用开发相关技术

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

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

{
path: ‘/about’,
name: ‘About’,
component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
}
]

const router = new VueRouter({
mode: ‘history’,
base: process.env.BASE_URL,
routes
})

export default router

**2. 现在，要实现守卫的概念。就是当我没有在登录页进行登录时，直接点击User时，路由不会跳转到user页面，会直接跳转到login登录页面，只有当我在登录页登录后，点击User才能跳转到user页面：**


login.vue页面代码如下，本来登录是要向服务器发一次请求的，因为是演示，所以这里登录不会调用接口。那我们就假如登录后会把账号存储在浏览器本地存储中，当跳转到user页面时，user页面判断本地存储是否存在登录账号信息，存在则显示，否则强行跳到登录页：

这是登录页面，登录后才可查看个人信息页面

账号：

密码：

*使用 localStorage 创建一个本地存储的 name/value 对。*


user.vue页面如下，在生命周期 created 阶段，进行判断是否登录：

个人信息页面

账号：{ { username }}

博客：北极光之夜。

效果如下，没登录时，本地存储没信息，