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. Git使用总结(三):协同开发常见冲突

    1.不同人修改了不同的文件 a.账户A,账户B分别从远端拉取了相同分支     b.账户A修改了main.cpp文件后提交到远端,账户B修改fun.cpp文件提交远端时会报如下错误           ...

  2. FireDAC 如何按整型(Byte)读取 MySQL TinyInt(1) 类型字段?

    最近使用 MySQL 发现 FireDAC 中查询 TinyInt(1) 字段结果是 Boolean 类型,这并不是我想要的结果,而TinyInt(1)的范围是-128-127之间,如何按整型读取呢? ...

  3. go get 使用proxy来下载

    http_proxy=https://127.0.0.1:1087 go get -v github.com/Shopify/sarama https_proxy=https://127.0.0.1: ...

  4. dotnet Core学习之旅(序)

    .NET Core 新玩具,新工具,新生产力 我将在博客园我从0.1开始探索.NET Core 的过程. 为什么是从0.1开始而不是从0开始 我在微软刚宣布开源的时候便接触到了.NET Core 1. ...

  5. stdmap 用 at() 取值,如果 key 不存在,不好意思,程序崩溃。QMap 用 value()取值,如果 key 不存在,不会崩溃,你还可以指定默认值

    我觉得 Qt6 最应该升级的是容器类 stdmap 在遍历的时候,同时获取 key 与 value 非常方便: for(auto& var:map){    qDebug()<<v ...

  6. Yii2 redis 使用

    首先要安装一下redis的扩展 composer require yiisoft/yii2-redis 在配置文件中添加redis配置 'components' => [ .... 'redis ...

  7. sql server中:isnull(列名,0) 和isnull(列名,0)<>0 的区别

    1.isnull(参数1,参数2),判断参数1是否为NULL,如果是,返回参数2,否则返回参数1. 2.isnull(列名,0),isnull()函数是用来判断列名是否为null,如果为NUll,则返 ...

  8. c# 事件 +=和-=有什么区别

    +=就是發生新事件的同時通知你: -=就是發生新事件的同時不通知你:

  9. Identityserver4证书

      dotnet应用用IdentityServer4做了登陆的功能,本地运行没有问题,部署到服务器上面就出现上面的问题,打开服务器的日志记录开关,获取到下面的异常信息.原来是     通过分析日志信息 ...

  10. extjs layout 最灵活的页面布局样式

    当你在页面布局的时候,遇到页面元素较多,不知如何完美布局... 可以试试下面这个类型,万能布局类型. var panel = new Ext.Panel({ renderTo:Ext.getBody( ...