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. [转]JAVA反射中的getFields()方法和getDeclaredFields ()方法的区别

    关于获取类的字段有两种方式:getFields()和getDeclaredFields().我们先来看看这两者的区别吧: getFields():获得某个类的所有的公共(public)的字段,包括父类 ...

  2. Java中ArrayList实现原理

    简述: ArrayList可以理解为动态数组,与Java中的数组相比,它的容量能动态增长.超出限制时会增加50%容量,用System.arraycopy()复制到新的数组中,因此最好能给出数组大小的预 ...

  3. git commit 合并

    日常 git 管理代码的时候,经常因为因为一些小的代码改动而进行一次 git commit , 但是这样造成的后果就是小的 git commit 很多很杂. 今天特意的研究了一些 git commit ...

  4. redis主从配置(docker实现)

    一.docker新建两个redis服务端,并分别设置端口为6379和6380 命令如下: docker run -p : -d --name redis-server docker.io/redis: ...

  5. win7系统损坏无法进入系统(dsark.sys文件损坏)(未测试过)

    原文:http://blog.csdn.net/foreverhuylee/article/details/37913837 电脑今天突然开不了机,出现一下画面 即提示d:\Windows\syste ...

  6. win10老提示系统错误,要注销

    win10老提示系统错误,要注销? 开启user manager 服务(对我没用) 用administrator账户(成功,不提示了) 或者创建一个新账户(未测)

  7. es cat http://localhosts:9002/_cat/nodes?v

    http://localhosts:9002/_cat/nodes?v&h=http,version,jdk,disk.total,disk.used,disk.avail,disk.used ...

  8. eclipse中设置字体为VC经典字体Fixedsys

  9. sparkR集群启动脚本的封装。

    sparkR默认是以单机方式运行的.实现sparkR的集群启动,需要指定master地址,占用内存.CPU,及UI端口等,这对分析人员来说是比较麻烦的. 如何实现对其启动的封装,方便分析人员来使用: ...

  10. Python __all__系统变量

    #__all__系统变量的使用 ''' __all__可以赋值一个字符串列表,列表中的元素表示外界调用该py文件可以使用的函数或者类 如果使用了__all__系统变量,并且调用该py文件使用的是fro ...