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. MYSQL 八大优化方案

    1.选取最适用的字段属性 ​ MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设 ...

  2. Python re模块学习

    这是re模块与正则的结合 re模块提供的函数 1.match  尝试在字符串的开头应用该模式,返回匹配对象,如果没有找到匹配,则为None. import re str1 = "Why ar ...

  3. 爬虫探索Chromedriver+Selenium初试

    今天分享Python使用Chromedriver+Selenium爬虫的的方法,Chromedriver是一个有意思的爬虫插件,这个插件的爬虫方式主要是完全模拟浏览器点击页面,一步一步去找你要的东西, ...

  4. AS3.0 位图(BMP)解析类

    /** * *-----------------------------* * | *** BMP格式解析类 *** | * *-----------------------------* * * 编 ...

  5. (转)DMA(Direct Memory Access)

    DMA(Direct Memory Access) DMA(Direct Memory Access)即直接存储器存取,是一种快速传送数据的机制. 工作原理 DMA是指外部设备不通过CPU而直接与系统 ...

  6. 获取ApplicationContext进而获取Ioc实例方法

    在正常情况下 spring管理的类可直接调用Ioc容器中的实例,但在一些特殊情况下(例如拦截器中获取dao实例),Bean需要实现某个功能,但该功能必须借助于Spring容器才能实现,此时就必须让该B ...

  7. 在论坛中出现的比较难的sql问题:37(动态行转列 某一行数据转为列名)

    原文:在论坛中出现的比较难的sql问题:37(动态行转列 某一行数据转为列名) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.

  8. 【ES6】数组的扩展

    1.Array.from(): 将伪数组对象和遍历的对象转为真数组 如果一个对象的键都是正整数或者0,并且有 Length属性,那么这个对象很想数组,称它为伪数组. 伪数组: let obj = { ...

  9. C#倒计时关闭提示框

    前两天实现某个功能需要做一个提示框 并且能够自动关闭的,就从网上搜了一个能够自动关闭的提示框 ,但由于我需要的场景是不确定计时时间的,所以并没有使用到该窗体,但是我觉得可以留存备用 ,后边也把我 这种 ...

  10. Centos6 r8192ce_pci

    Centos6 r8192ce_pci # # yum install epel-release# yum-config-manager --enable rhui-REGION-rhel-serve ...