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. js多种去重的方法总结

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 Array.pro ...

  2. [转帖]是什么阻止了在18寸(450mm)晶圆上生产芯片?

    是什么阻止了在18寸(450mm)晶圆上生产芯片? https://news.cnblogs.com/n/644247/ 投递人 itwriter 发布于 2019-10-16 14:32 评论(0) ...

  3. [转帖]深度分析HBase架构

    深度分析HBase架构 https://zhuanlan.zhihu.com/p/30414252   原文链接(https://mapr.com/blog/in-depth-look-hbase-a ...

  4. a+b的问题

    题目描述: 给定两个整数 a, b (a, b 均不超过 int 类型的表示范围),求出 a + b 的和. 输入描述: 每行输入两个整数 a 和 b,用空格隔开. 输出描述: a + b 的值. 样 ...

  5. 『Python基础』第20节:深浅copy

    一. 赋值运算 l1 = [1, 2, 'conan', [11, 22]] l2 = l1 l1[0] = 111 print(l1) # [111, 2, 'conan', [11, 22]] p ...

  6. Hadoop 求单词count数

    package com.yw.hadoop273; import org.apache.hadoop.io.IntWritable; import org.apache.hadoop.io.LongW ...

  7. fastjson<1.2.47 RCE 漏洞复现

    这两天爆出了 fastjson 的老洞,复现简单记录一下. 首先使用 spark 搭建一个简易的利用 fastjson 解析 json 的 http server. package cn.hackte ...

  8. github的pull request是指什么意思?有什么用处(转)

    https://www.cnblogs.com/-walker/p/6093277.html

  9. dB分贝计算

    1. 定义 dB-表征相对值的大小的单位,即两个电.声功率之比或者电流.电压.音量之比,是一种测相对大小的单位. 1.1 电.声功率之比——10lg(x/y) x.y分别表示两个欲比较的功率值. 例如 ...

  10. VS.NET(C#-2.5)_简单例子(所有控件都转换成HTML控件)

    简单例子 UI设计视图  UI代码视图 <% @PageLanguage="C#" AutoEventWireup="true"CodeFile=&quo ...