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里。然后就敲完收工

全局钩子作用于所有路由,
里面的参数
<code>to</code>表示即将要进入的路由对象,
<code>from</code>表示即将要离开的路由对象,
<code>next</code>是继续跳转或中断的方法。
我们来看一下打印出的对象

vue router.beforeEach(),详解的更多相关文章

  1. 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的项目启 ...

  2. vue 文件目录结构详解

    vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...

  3. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  4. vue 源码详解(一):原型对象和全局 `API`的设计

    vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...

  5. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

  6. vue:vuex详解

    一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...

  7. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

  8. 【05】Vue 之 实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  9. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

随机推荐

  1. 031 Android 自定义控件

    1.自定义控件的优点 Android自身带的控件不能满足需求, 需要根据自己的需求定义控件. 2.自定义控件的分类: (1)组合已有的控件实现 (2)继承已有的控件实现(扩展已有的功能) (3)完全自 ...

  2. ESP32 - GPIO中断触发与事件回调

    最近为项目增加了GPIO外部触发中断功能,原理是为GPIO32注册了上升沿触发事件,事件触发后,会向RTOS队列写入数据.在RTOS事件中检测到该队列中有新加入的事件,就读出,并执行相应代码. #de ...

  3. input的小技巧 清除自动记录

    input 消除自动记忆功能 在html里就可以直接清除了<input type="text" autocomplete="off"> input ...

  4. 机器学习SVD笔记

    机器学习中SVD总结 矩阵分解的方法 特征值分解. PCA(Principal Component Analysis)分解,作用:降维.压缩. SVD(Singular Value Decomposi ...

  5. TZOJ3133: 求对称点

    #include<stdio.h> int main() { double a,b,c,d,e,f,g,h,i; while(~scanf("%lf %lf %lf %lf %l ...

  6. Arm-Linux 移植 mtd-utils 1.x

    有关文章:<mtd-utils 的 使用> 背景: 关于在公司的生产环境有关.不希望每次都在uboot下面做nand flash 的烧写:也觉得使用U盘升级的方法比较慢,而且有关的驱动不是 ...

  7. SpinWait 第二篇

    SpinWait 提供了两个方法和两个只读属性. 方法: SpinWait.Reset() : 重置自旋计数器,将计数器置 0.效果就好像没调用过SpinOnce一样.SpinWait.Once() ...

  8. jmeter命令行执行脚本_动态参数设置

    从04月换公司开始,就没静下来心来学习,其中发生了比较多的事情吧,不过不管如何,没坚持学习还是因为懒.本周交接完,下周去入职新公司,该静下心来学点什么了. ---------------------- ...

  9. sqlserver导入Excel数据 总是报错:错误 0xc020901c: 数据流任务 1: 输出“Excel 源输出”(55) 上的 输出列“T2”(64) 出错。返回的列状态是:“文本被截断,或者一个或多个字符在目标代码页中没有匹配项

    在网络上搜索解决办法,解决办法是把excel导入到access数据库中,再把access数据库导入到sqlsever中,公司机器上不让安装office工具,问了一个同事得到的回答是把数据中很长的那行数 ...

  10. 测试winform程序到树莓派运行

    啥也不说了,都在下图中了.winform可以在树莓派上跑了