在index.js中

//定义路由
const router = new Router({
routes,
strict: process.env.NODE_ENV !== 'production',
})
//拦截器
router.beforeEach((route, redirect, next) => {if (!sessionStorage.getItem("userid") && route.path !== '/') {
next({
path: '/',
query: {redirect: route.fullPath}
})
} else {
console.log("-------------------",route,redirect);
next()
}
})
export default router

在login.vue中登录成功中加入

if(this.$route.query.redirect){
  let redirect = this.$route.query.redirect;
this.$router.push(redirect);
}else{
  //默认登录成功后进入的页面
  this.$router.push('manage');
}

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

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

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

  2. vue项目前端限制页面长时间未操作超时退出到登录页

    之前项目超时判断是后台根据token判断的,这样判断需要请求接口才能得到返回结果,这样就出现页面没有接口请求时还可以点击,有接口请求时才会退出 现在需要做到的效果是:页面超过30分钟未操作时,无论点击 ...

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

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

  4. vue router路由(三)

    当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...

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

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

  6. Vue Router路由管理器介绍

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

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

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

  8. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  9. jQuery 向另一个页面传参,同时跳转到该页面

    为了使参数能够传递到另外一个页面,使用ajax的跳转方式 $.ajax({ type: "POST", url:"/admin/sysjgl/sysjck/sjcs&qu ...

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

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

随机推荐

  1. 【存】008 Linux 文件查找 find

    01 一起来认识 find! 在 Linux 系统,find 毫无疑问是最强的文件查找工具.find 一般会与其他命令结合,将查找到的结果作为参数传入到后置命令中,进行删除.统计.复制迁移等操作. 0 ...

  2. 分治FFT小记🐤

    分治FFT:在 $O(n \log^2 n)$ 的时间内求出类似于 $f_i=\sum\limits_{j=0}^{i-1}g(i-j)f(j)$ 之类的递推式 思想:同 CDQ 分治的思想,先分成左 ...

  3. 使用VScode编写Markdown的一些使用技巧

  4. js 斐波那契数列的获取和曲线的实现(每日一更)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. [ACM]Link-Cut Tree实现动态树初探

    动态树问题是指的一类问题,而不是具体指的某一种数据结构.它主要维护一个包含若干有根树的森林,实现对森林的修改和查询等. 实现动态树的数据结构据说主要有4种,Link-Cut Tree是其中的一种.Li ...

  6. Jvm和CPU保证特定情况下不乱序

    简介 CPU为了提高指令执行效率,会在一条指令执行过程中(比去内存读数据(慢100倍)),去同时执行另一条指令,前提是,两条指令没有依赖关系. CPU保证不乱序 MESI--CPU缓存一致性协议(In ...

  7. JS中的堆内存与栈内存

    在js引擎中对变量的存储主要有两种位置,堆内存和栈内存. 和java中对内存的处理类似,栈内存主要用于存储各种基本类型的变量,包括Boolean.Number.String.Undefined.Nul ...

  8. where子句和having子句区别

    感谢大佬:https://blog.csdn.net/XiaopinOo/article/details/78305008 where子句和having子句的区别: 1.where  不能放在grou ...

  9. V8 内存管理和垃圾回收机制总结

    这篇文章主要介绍 V8 的内存管理和垃圾回收知识. V8 内存管理及垃圾回收机制浅析 由于 V8 引擎的原因,Node 在操作大内存对象时受到了一些限制,在 64 位的机器上,默认最大操作的对象大小约 ...

  10. 什么是UIImageView

    UIKit框架提供了非常多的UI控件,但并不是每一个都很常用,有些控件可能1年内都用不上,有些控件天天用,比如UIButton.UILabel.UIImageView.UITableView等等 UI ...