vue路由进阶
2024-08-27 20:08:28
一..全局路由前置守卫
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>
最新文章
- Spring4读书笔记(1)-模块
- UISegmentedControl 的使用
- 浅析配置更快的Eclipse方法
- WIN10 ANDROIDSTUDIO1.2 安装完首次启动报错
- iOS:特殊符号大全
- android05
- iOS - NSURLConnection 网络请求
- 【转】ViewGroup的onMeasure和onLayout分析
- 3997: [TJOI2015]组合数学
- 【VB超简单入门】五、基本输出输入
- ACM Misha and Changing Handles
- 关于新版本,iOS10的相关内容,兼容iOS 10 资料整理笔记
- 华为S5700配置端口镜像和华三S5120配置802.1X认证记录
- cmd关闭被占用的端口命令及教程详解
- Java语法基础常见疑惑解答8,16,17,21图片补充
- Python之lambda匿名函数使用if条件语句
- Maven 默认插件以及功能
- [.NET开发] C#编程调用Cards.dll实现图形化发牌功能示例
- jBPM4.4 eclipse插件安装
- 以下内容为Stackoverflow上整理以作纪录
热门文章
- linux 精确延时
- salesforce lightning零基础学习(十六) 公用组件之 获取字段label信息
- Chapter 05—Advanced data management(Part 1)
- Tensorflow Serving Docker compose 部署服务细节(Ubuntu)
- .Net core-邮件发送(同步,异步)底层代码(欢迎留言讨论)
- cocoapods 安装使用详解
- CollectionView常用的布局方式总结
- git log详细使用参数
- OA思维导图(第一次画)
- 使用 Python 验证数据集中的体温是否符合正态分布