vue router.beforeEach(),详解
outer.beforeEach()一般用来做一些进入页面的限制。
比如没有登录,
就不能进入某些页面,只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。
第一步 规定进入路由需不需要权限
@/router/index.js
import A from '@/components/a'
{
path: '/a',
name: 'a',
component: A,
meta : { //加一个自定义obj
requireAuth:true //这个参数 true 代表需要登录才能进入A
}
},
第二步 使用vuex整一个userId
@/assets/store.js
//使用vuex三步走
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//这个理论来说
const store = new Vuex.Store({
state:{
userId : ''
}
})
export default store
第三步 使用router.beforeEach()
import store from '@/assets/store' //把这个userId获取过来
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(store.state.userId){
next()
}else{
next({path:'/b'})
}
}else{
next()
}
})
第四步
第三步这个/b路由其实就是登陆页面,
当进入A页面之前,需要请求接口,获取一下是否有登陆过,然后把这个userId存在vuex的state里。
当没有userId时,则在登陆之后,存一个userId到state里。然后就敲完收工
我们来看一下打印出的对象
vue router.beforeEach(),详解的更多相关文章
- main.js index.html与app.vue三者关系详解
main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186 main.js与index.html是nodejs的项目启 ...
- vue 文件目录结构详解
vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...
- Vue props用法详解
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...
- vue 源码详解(一):原型对象和全局 `API`的设计
vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...
- vue 源码详解(二): 组件生命周期初始化、事件系统初始化
vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...
- vue:vuex详解
一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...
- Vue.js项目详解
还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
随机推荐
- uwsgi03----直接部署
1.http 和 http-socket的使用上有一些区别: http: 自己会产生一个http进程(可以认为与nginx同一层)负责路由http请求给worker, http进程和worker之间使 ...
- dotnet Core学习之旅(序)
.NET Core 新玩具,新工具,新生产力 我将在博客园我从0.1开始探索.NET Core 的过程. 为什么是从0.1开始而不是从0开始 我在微软刚宣布开源的时候便接触到了.NET Core 1. ...
- javascript-state-machine
import StateMachine from 'javascript-state-machine' import EventEmitter from 'events' /** * 上传的文档的状态 ...
- Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)
custom form control 之前就写过了,这里简单写一下. 创建一个组件实现 ControlValueAccessor 接口 @Component({ providers: [ { pro ...
- 括号匹配问题 —— Deque双端队列解法
题目: 给定一个只包括 '(',')','{','}','[',']'?的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合.左括号必须以正确的顺序闭合.注意空字符串可 ...
- Spring Cloud Alibaba学习笔记(15) - 整合Spring Cloud Gateway
Spring Cloud Gateway 概述 Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于Netty.Reactor以及WEbFlux构建,它 ...
- javascript 之 扩展对象 Object.assing
语法:Object.assign(target,...source) 说明:Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 一.以对象为参数的合并 1.第一个参数都是对象, ...
- Asp.Net进阶/管家模式+发布订阅模式:练习
现在需要实现一个需求:我需要在一个窗体中发送一个信息,其余几个窗体都能同时接收到发送的消息. 1.界面:一个管家窗体,1个主窗体,2个订阅者窗体.其中管家窗体为启动窗体. 2.订阅:2个订阅窗体订阅主 ...
- .Net Core Mvc/WebApi 返回结果封装
一.背景 为了方便开发,简化代码,也为了与前端方便对接,需要对接口服务返回结果进行统一处理. .Net Core 中返回结果的处理与 .Net Framework 中的处理不一样. .Net Core ...
- IDEA配置maven报错解决方案
主要是得分清楚你的本地maven库,以及maven安装根目录 ,一般你自己安装maven成功后,电脑默认读取的库位置在C盘下面. 只要把路径指向搞对了,就没什么问题了 .