vue实现了不登录跳转到登录页面的方法

环境：vue 2 . 9 . 3；webpackvue路由器

目的：实现无登录跳转

示例：直接输入./home在url地址栏中，但此页面需要登录后才能进入。判断值由登录后存储在本地缓存中的令牌来判断。如果没有，跳转到登录页面，然后打开它。

插图：

1.直接在url地址栏输入http://127.0.0.1:9000/#/home，但页面会直接跳转到带参数的登录页面。

分界线。

需要安装Vue路由器

首先配置路由

/src/router/index.js

从“vue”导入vue从“vue-router”vue导入路由器。使用(路由器)导出默认新路由器({route: [{path:'/'，//登录名： 'Login '，组件： resolve=require([' @/PACS/pages/log in ']，resolve) }，{ path: '/home '，名称： 'Home '，元meta: { requireAuth: true，//判断是否需要登录}，组件： resolve=require([' @/PACS/require)然后配置main.js

//路由判断登录：根据参数router.beforeeach ((to，from，next)={if (to。matched . some(record=record . meta . require auth)){//判断路由是否需要登录authority console.log('需要登录')；If (localStorage.token) {//判断当前令牌是否存在；登录存款的下一个令牌()；} else {next ({path:'/'，query: {redirect3360 to。full path }//以跳转的路由路径为参数，成功登录后跳转到此路由})} } else { next()；}});这是登录时存储的令牌

# #在这种情况下，您将在登录时直接跳转到登录页面。

登录成功后，跳回输入页面，后面传递的值将被使用。

如果包含重定向，跳转到刚刚输入的页面。

注意：如果将用户数据保存到localstorage不合理，这只是一种思路。如果登录后浏览器数据未清零，令牌将一直存在，判断无效。

摘要

以上是边肖介绍的vue的实现，不登录跳转到登录页面，希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！