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. C++拾忆

    1.引用 1.建立引用的时候,必须初始化,引用一旦初始化,就和一个对象绑定,不能再修改为其他对象的引用 2.对引用取地址,和对原始对象取地址,是同一个地址 3.不能用做引用的:void.数组 2.内联 ...

  2. [转帖]hadoop学习笔记:hadoop文件系统浅析

    hadoop学习笔记:hadoop文件系统浅析 https://www.cnblogs.com/sharpxiajun/archive/2013/06/15/3137765.html 1.什么是分布式 ...

  3. [Visual Studio] - Unable to launch the IIS Express Web server 问题之解决

    背景 Visual Studio 2015 在 Debug 模式下调试失败. 错误 解决 删除解决方案下 .vs/config 文件夹,重新运行解决方案可进行调试. 参考资料 https://stac ...

  4. 如何理解MVC

    在面试的时候,MVC这个概念考的次数很多,有许多人只能把三个字母解释成三个单词:model,view,controller,但是如果往深处说就说不出来什么东西了,对这个概念模糊不清,今天闲来无事看了一 ...

  5. 资深程序员推荐必备书籍 《C语言程序设计》

    当下,IT行业发展日趋迅猛,产值成倍增长,高薪的诱惑更是驱使许多人想要进入IT行业发展.为了使大家更全面理解C语言程序设计,由千锋教研院高教产品研发部编著.清华大学出版社倾情出版的<C语言程序设 ...

  6. PB自动换行

    1.在DataWindow Painter中打开DataWindow; 2.在需设定自动折行的列上单击, 查看右侧的属性窗口: 3.点击Position标签, 选中Autosize Height 多选 ...

  7. BUG:WSL 的 ssh server 无法启动

    BUG 使用 sudo service ssh start 启动 ssh 服务,提示: * Restarting OpenBSD Secure Shell server sshd Could not ...

  8. Java中@SuppressWarnings("unchecked")的作用

    J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 一点背景:J2SE 5.0 为 Java 语言增加 ...

  9. php批量检测并去除BOM头的代码

    开发中会遇到BOM头, 导致程序无法执行. 浏览器返回接口如下图: 去除BOM头解决方法:<?phpini_set('memory_limit','1024M'); function check ...

  10. Extjs 兼容IE8常见问题及解决方法

    1. 在IE8中整个页面都打不开,一般情况是: 页面组件中最后一个属性出现了逗号 没有多余的逗号,就很有可能是组件中没有设置renderTo:Ext.getBody(); 2. 页面按钮颜色失效 自定 ...