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(很关键)
随机推荐
- Solaris平台,如何通过端口号快速查看PID(进程)
1. vi /tmp/test.ksh #!/bin/ksh line='---------------------------------------------' pids=$(/usr/bin/ ...
- 笔记:Bridging the Gap Between Relevance Matching and Semantic Matching for Short Text Similarity Modeling
笔记:Bridging the Gap Between Relevance Matching and Semantic Matching for Short Text Similarity Model ...
- 前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)
前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...
- Linux远程访问及控制
Linux远程访问及控制 目录 Linux远程访问及控制 一.SSH远程管理 1. SSH远程管理概述 2. OpenSSH概述 3. 配置OpenSSH服务端 4. sshd服务的验证方式 5. 使 ...
- 01网络编程(基础知识+OSI七层协议+TCP与UDP)
目录 01 网络编程 一.软件开发架构 1.1 CS架构 1.2 BS架构 二.网络理论前戏 2.1 简介 2.2 常见硬件 三.OSI七层协议(五层) 3.1 七层协议 3.2 五层协议 3.3 知 ...
- 基于6U VPX 的mSATA高性能数据存储板
一.板卡概述 该产品系我司自主研发.基于标准6U VPX架构. 二.产品特性 大存储容量8TB 读写方式RAID0 ,读写速率2GB/s 四路x4 SRIO@5Gb ...
- Solution -「SHOI2016」「洛谷 P4336」黑暗前的幻想乡
\(\mathcal{Description}\) link. 有一个 \(n\) 个结点的无向图,给定 \(n-1\) 组边集,求从每组边集选出恰一条边最终构成树的方案树.对 \(10^9+ ...
- 关于IDA无法从symbol server下载pdb的问题
在ida目录下,symsrv.dll同目录下创建一个symsrv.yes文件. symsrv.yes将可下载: symsrv.no将失败: 没有相关文件将会弹出授权询问,选择yes和no将创建对应文件 ...
- 有个姑娘叫history
文章目录 常用参数 history的一些用法 修改history命令默认保存的数量 来给history穿衣服 让我们重新认识一下history history命令用于显示用户以前执行过的历史命令,并且 ...
- Zookeeper开源客户端Curator之创建会话
前面Zookeeper的链接使用的都是其提供的原生代码,实际开发过程中非常底层的细节开发工作如连接重连,反复注册等耗费开发人员大量的工作精力并且重复工作.而开源客户端Curator的出现解决了该类问题 ...