vue路由进阶
一..全局路由前置守卫
1.首先看一下文档结构
Dashboard和Login是一级页面 home about mine是在Dashboard下的二级页面
2.router.js代码如下
import Vue from 'vue'
import Router from 'vue-router'
// 一级界面
import Login from './views/Login'
import DashBoard from './views/DashBoard'
// 二级界面
import Home from './views/Home'
import Mine from './views/Mine'
const About = ()=> import('./views/About');
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', redirect: '/dashboard' },
{
path: '/dashboard',
name: 'dashboard',
component: DashBoard,
children: [
{ path: '/dashboard', redirect: '/dashboard/home' },
{path: 'home', name: 'home', component: Home,},
{path: 'about', name: 'about', component: About},
{path: 'mine', name: 'mine', component: Mine}
],
},
{path: '/login', name: 'login', component: Login}
]
});
// 全局路由前置守卫
router.beforeEach((to, from, next)=>{
// console.log(to, from);
if(to.path !== '/login'){ // 验证是否登录
if(window.isLogin){ // 已经登录 window.isLogin是自己自定义的一个全局变量 登录是 点击一下就是变为true
next();
}else { // 没有登录
next('/login?redirect='+ to.path);
// next('/login?redirect=/dashboard/mine');
//next('/login');
}
}else { // 不需要验证
next();
}
// 放行
next();
}); // 全局路由后置守卫
router.afterEach((to, from) => {
// console.log('来了!');
});
//把router作为实例输出出去
export default router;
login.vue里面的代码
点击按钮window.isLogin = true就登录跳转,这里只是做了一个模拟登录
<template>
<div>
<h2>登录界面</h2>
<button @click="login">登录</button>
</div>
</template> <script>
export default {
name: "Login",
methods: {
login(){
// 1. 登录成功
window.isLogin = true;
// 2. 获取回调地址
const redirect = this.$route.query.redirect;
if(redirect){ // 有回调地址
this.$router.push(redirect);
}else { // 没有回调地址
// 去首页
this.$router.replace('/');
}
}
}
}
</script> <style scoped> </style>
vue路由进阶的更多相关文章
- vue进阶:vue-router(vue路由)的安装与基本使用
vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...
- 初印象至Vue路由
初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...
- Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
随机推荐
- Spring通过IOC帮我们做火鸡
一.IOC--setter注入 1.准备dmo 首先准备一只火鸡 public class Turkey { private int id; private String name; public i ...
- golang数据结构之总结
golang语言的一些数据结构实现,包括: 队列(单队列.循环队列) 链表(单链表.双链表.循环链表(解决约瑟夫环问题)) 栈(实现加减乘除计算) 递归之迷宫问题 哈希表(员工管理系统) 树(三种遍历 ...
- UITableView 实例详解 滑动编辑 headerView
转自:http://blog.csdn.net/reylen/article/details/8505960 self.dataArray = [[[NSMutableArray alloc]init ...
- 基于 SOA 架构,创建 ego-search-web 项目-solr集群-zookeeper集群
项目架构 Ego-search-web 服务的消费者,ego-rpc 服务提供者 建立 ego-search-web 项目 继承:ego 依赖:ego-common ego-rpc-service ...
- MyBatis—resultMap 的关联方式实现多表查询(多 对一)
mapper 层 a)在 StudentMapper.xml 中定义多表连接查询 SQL 语句, 一次性查到需要的所有数据, 包括对应班级的信息. b)通过<resultMap>定义映射关 ...
- CSU OJ 2148 梦皮神
Description Wells最近经常做一些有皮神出现的梦. 在这一次梦中Wells把皮神(Pikachu)弄丢了,Wells在一个正 N 边形区域的中心开始自闭,Wells想找回皮神,同时皮神也 ...
- 这十道经典Python笔试题,全做对算我输
经常有小伙伴学了Python不知道是否能去找工作,可以来看下这十道题检验你的成果: 1.常用的字符串格式化方法有哪些?并说明他们的区别 a. 使用%,语法糖 print("我叫%s,今年%d ...
- Pycharm-2018.3.1专业版破解教程
1.去官网下载并安装2018.3.1(目前最新)专业版本的Pycharm:(https://www.jetbrains.com/pycharm/download/#section=windows). ...
- Python递归函数如何写?正确的Python递归函数用法
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归 ...
- PostgreSQL 、springboot 、spring data jpa 集成
项目地址:https://gitee.com/zhxs_code/PostgreSQL_springboot_jpa_demo.git 增删查改都已经实现. 重点部分: 1.定义自己的方言. pack ...