router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
if (token) { // 判断当前的token是否存在
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else {
next();
}
});

  

在这之前是给路由加一个meta属性:

{
path: '/index',
meta: {
title: '',
requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
},
}

注意:但是事实是登录的时候大多数时候并不进行跳转,所以这里需要在login跳转的路径中再加一段:

if(this.$route.query.redirect){
// let redirect = decodeURIComponent(this.$route.query.redirect);
let redirect = this.$route.query.redirect;
this.$router.push(redirect);
}else{
this.$router.push('/');
}

Vue-router路由判断页面未登录跳转到登录页面的更多相关文章

  1. vue实现未登录跳转到登录页面

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给 ...

  2. vue 判断是否登录,未登录跳转到登录页

    网页一进入判断是否登录,未登录跳转到登录页面 router.js export default new Router({ routes: [ { path: '/', name: 'HelloWorl ...

  3. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  4. SSM登录跳转到登录页,登录页不能加载js和样式

    SSM登录跳转到登录页,登录页不能加载js和样式选用jsppage添加根路径. <% String rootPath = request.getContextPath(); %> < ...

  5. Vue-router路由判断页面是否登录,未登录跳转到登录页面

    在index.js中 //定义路由 const router = new Router({ routes, strict: process.env.NODE_ENV !== 'production', ...

  6. vue router路由跳转了,但是页面没有变(已解决)

    小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)

  7. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  8. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  9. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  10. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

随机推荐

  1. wcf中的Message类

    客户端->服务端—>客户端 客户端代码: using (new OperationContextScope(client.InnerChannel))            {       ...

  2. android 中使用jwt token(json web token)--java

    http://blog.csdn.net/mingzhnglei/article/details/51119836 下面贴上自己项目中的一个小小的example import com.nimbusds ...

  3. 【Unity笔记】根骨骼动画/运动(Root Motion)

    根骨骼动画:当动画中角色发生位移后,动作坐标原点跟随角色移动.例如一个向前跳跃的动画,如果在场景中重复该动画,能够看到角色一路往前跳跃,位置一直在前进.适用于有位移的放技能动作等. 非根骨骼动画:当动 ...

  4. InstallShield脚本事件

    脚本事件主要有三大类:Before Move Data(安装数据前).Move Data(安装数据过程中).After Move Data(安装数据后). OnBegin:在初始化后,被调用 OnFi ...

  5. css 可穿透

    pointer-events : none; 引自:http://www.thinkphp.cn/topic/4702.html

  6. 【javascript】js 检验密码强度

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...

  7. Laravel 定时任务

    一 .创建Command文件 php artisan make:console RefreshToken 创建app/Console/Commands 下创建RefreshToken.php 取一个名 ...

  8. 常用的HTTP协议状态码

    200 - OK,服务器成功返回网页     - Standard response for successful HTTP requests. 301 - Moved Permanently(永久跳 ...

  9. R-table和tapply函数

    table可统计数据的频数 tapply可根据因子.向量和要计算的函数计算 > class<-c(1,2,3,2,1,2,1,3) > class[1] 1 2 3 > c(8 ...

  10. USB2.0学习笔记连载(十八):keil实现寄存器的配置及相关函数讲解(二)

    其实之前也有提及过,Cypress公司提供的官方文件和应用手册真的可以解决很多问题.做的也很人性化,操作也及其简单,几乎只要在 TD_int()里面配置一些常用的参数即可,其他都可以不用操作. 作为一 ...