如何设置Vue路由守卫和页面登录权限控制？

本文共计412个文字，预计阅读时间需要2分钟。

在登录页面存储登录数据，并在登录成功时保存登录状态；

使用sessionStorage.setItem保存登录数据；

通过VueRouter添加路由守卫；

直接在路由配置中添加VueRouter实例。

①先在我们的登录页面存储一个登录数据

// 登录成功时保存一个登录状态； sessionStorage.setItem("flag", 1);

② 添加路由守卫

方法一： 直接在路由中添加

const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { // ... })

方法二：当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { }）方法。