在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. http中的8种请求介绍

    HTTP协议的8种请求类型介绍 HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特 ...

  2. AtCoder Beginner Contest 238 A - F 题解

    AtCoder Beginner Contest 238 \(A - F\) 题解 A - Exponential or Quadratic 题意 判断 \(2^n > n^2\)是否成立? S ...

  3. Nacos服务注册与发现的2种实现方法!

    Spring Cloud Alibaba 技术体系中的 Nacos,提供了两个重要的功能:注册中心(服务注册与发现)功能和配置中心功能. 其中注册中心解决了微服务调用中,服务提供者和服务调用者的解耦, ...

  4. Swift可选类型

    可选类型 可选类型的介绍 注意: 可选类型时swift中较理解的一个知识点 暂时先了解,多利用Xcode的提示来使用 随着学习的深入,慢慢理解其中的原理和好处 概念: 在OC开发中,如果一个变量暂停不 ...

  5. Jackson转换为Collection、Array

    1. Jackson转化为Array 注意的地方就是实体类一定要有无参的构造方法,否则会报异常 //com.fasterxml.jackson.databind.exc.InvalidDefiniti ...

  6. vagrant的box哪里下?镜像在哪儿找?教你在vagrant官网下载各种最新.box资源

    原文:vagrant的box哪里下?镜像在哪儿找?教你在vagrant官网下载各种最新.box资源 一.进入vagrant官网 https://www.vagrantup.com/ 二.点击findb ...

  7. C++学习笔记_complex类的实现

    头文件中的防卫式声明 点击查看代码 #ifndef __COMPLEX__ #define __COMPLEX__ class complex { } #endif 类的定义 点击查看代码 class ...

  8. Python编程知识

    继承->重写 class A(object): def __init__(self): print("super(B,self).__init__():运行A:init") ...

  9. ASP.NET Core 6框架揭秘实例演示[01]: 编程初体验

    作为<ASP.NET Core 3框架揭秘>的升级版,<ASP.NET Core 6框架揭秘>提供了很多新的章节,同时对现有的内容进行大量的修改.虽然本书旨在对ASP.NET ...

  10. 《手把手教你》系列技巧篇(六十六)-java+ selenium自动化测试 - 读写excel文件 - 上篇(详细教程)

    1.简介 在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...