Vue-router路由判断页面是否登录,未登录跳转到登录页面
在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路由判断页面是否登录,未登录跳转到登录页面的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vue项目前端限制页面长时间未操作超时退出到登录页
之前项目超时判断是后台根据token判断的,这样判断需要请求接口才能得到返回结果,这样就出现页面没有接口请求时还可以点击,有接口请求时才会退出 现在需要做到的效果是:页面超过30分钟未操作时,无论点击 ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- vue router路由(三)
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- jQuery 向另一个页面传参,同时跳转到该页面
为了使参数能够传递到另外一个页面,使用ajax的跳转方式 $.ajax({ type: "POST", url:"/admin/sysjgl/sysjck/sjcs&qu ...
- vue router路由跳转了,但是页面没有变(已解决)
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
随机推荐
- nginx多ip多端口多域名方式
目录 一:Nginx虚拟主机 1.基于ip的方式 2.基于多端口的方式 3.基于多域名的方式 一:Nginx虚拟主机 基于多IP的方式 基于多端口的方式 基于多域名的方式 1.基于ip的方式 [roo ...
- linux设置系统用户密码
目录 一:系统用户密码 1.设置用户密码 一:系统用户密码 1.设置用户密码 1.交互式方法 passwd [用户名] 2.免交互式 echo [设置密码] | passwd --stdin [用户名 ...
- python 小兵(4)之文件操作 小问题
1.光标不对就用seek 2.文件操作方面注意不要变修改变删除,会爆出文件正在运行不能操作 3.w模式下只有开始打开的时候会清空 4.文件操作的时候用as 后面的参数进行操作,不能用文件名进行操作 5 ...
- 如何在pyqt中实现亚克力磨砂效果的QLabel
前言 Windows10 在 UWP 应用中支持亚克力画刷,可以在部件的底部绘制亚克力效果的背景图.下面我们使用 QLabel 来模拟这个磨砂过程. 实现方法 MSDN 文档中介绍了亚克力材料的配方, ...
- 【建议收藏】Redis超详细入门教程大杂烩
写在前边 Redis入门的整合篇.本篇也算是把2021年redis留下来的坑填上去,重新整合了一翻,点击这里,回顾我的2020与2021~一名大二后台练习生 NoSQL NoSQL(NoSQL = N ...
- Atcoder ARC-064
ARC064(2020.7.23) A 直接贪心即可. B 手玩样例可以猜出这样一个结论,如果两端字符相同,如果字符串长度为奇数那么后手赢,否则先手赢,两端字符不同则相反.证明的话先从特殊情况开始入手 ...
- git删除误传的.idea文件
问题: 提交项目的时候忘记添加.gitignore文件,误上传了文件(如.idea)如何解决?如何删除Gitee地址上项目的.idea文件?(本文以.idea文件夹举例) 拉取项目 拉取项目 git ...
- Window 共享内存
转载请注明来源:https://www.cnblogs.com/hookjc/ C++使用共享内存实现进程间通信文件映射是一种实现进程间单向或双向通信的机制.它允许两个或多个本地进程间相互通信.为了共 ...
- SqlServer数据库表生成C# Model实体类SQL语句——补充
在sql语句最前边加上 use[数据库名] 原链接:https://www.cnblogs.com/jhli/p/11552105.html --[SQL骚操作]SqlServer数据库表生成C ...
- Ubuntu 20.04.3 LTS + Intel Realsense 400系列
Ubuntu 如何查看当前Ubuntu系统的版本,以及看自己的系统是否为LTS版本 lsb_release -a 如何查看Ubuntu系统的Linux系统版本,和GCC版本 cat /proc/ver ...