//钩子 登录拦截

router.beforeEach((to, from, next) => {

const sessionToken = window.sessionStorage.getItem("token");

if(to.path === '/' || to.path === '/Login') {

    next();

} else {//在这里可以做一些路由判断哦

    if(sessionToken !=''&&sessionToken !='null'&&sessionToken !=null) {

       next();

    } else {

       next('/Login');

    }

}

})

vue中的导航钩子的更多相关文章

  1. Vue-router中的导航钩子

    vue-router中的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消.(路由守卫) 原文指路:https://blog.csdn.net/weixin_41399785/article/det ...

  2. 【11】vue router 之导航钩子

    导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...

  3. 通俗理解vue路由的导航钩子中关于next()

    1 背景:你乘坐汽车从A景区想赶往B景区(模拟路由A跳转到路由B) 1.next() 你乘坐汽车要从A景区到B景区,路过关卡时,守门人拦下你,你量出了next(),守门人一看没问题,赶紧放行,于是你顺 ...

  4. vue中的导航守卫

    官方文档地址: 导航守卫:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 好的,重点内容 router.beforeEac ...

  5. Vue中的导航守卫（路由守卫）

    当做Vue-cli项目的时候感觉在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-g ...

  6. vue中父子组件钩子的执行顺序

    我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...

  7. vue中 左侧导航条 多个toggleClass

    <ul> <li v-for='item in items' @click="showToggle(item)"> <i :class="{ ...

  8. vue-router导航钩子

    Vue路由中的导航钩子,可以用来拦截导航,让它完成跳转. 全局导航钩子 当一个导航触发时,全局的 before 钩子按照创建顺序调用.钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直 ...

  9. 5分钟学会vue中的路由守卫(导航守卫)

    在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...

随机推荐

  1. vue 点击任意地方防止冒泡

    $('.mainL').mouseup(function(e){ let objLeader = $(obj.target); // 设置目标区域 if(!objLeader.is(e.target) ...

  2. Vue 基础 day03

    定义Vue 组件 什么是组件:组件的出现,就是为了拆分 Vue 实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件: 组件化和模块化的不同: ...

  3. Java学习day7面向对象编程1-对象和类

    一.Java编程中对象和类的概念 1,什么是类? 答:类是客观存在的,抽象的,概念的东西. 2,什么是对象? 答:对象是具体的,实际的,代表一个事物.例如:车是一个类,汽车,自行车就是他的对象. 关于 ...

  4. Vue.js状态管理模式 Vuex

    vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 安装.使用 vuex 首先我们在 vue. ...

  5. Dynamic Mapping和常见字段类型

    原文:Dynamic Mapping和常见字段类型 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn. ...

  6. jquery chosen插件使用及select常用方法

    1.chosen插件使用 chosen插件依赖于jQuery库或prototype,使用之前要先引入jQuery或prototype. 引入jquery插件和chosen插件,对需要美化的下拉框执行c ...

  7. Vue+Element-Ui 异步表单效验

    简单的效验 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名 /* ruleForm :表单绑定的数 ...

  8. pg_ctl - 启动，停止和重启 PostgreSQL 服务器

    SYNOPSIS pg_ctl start [ -w ] [ -s ] [ -D datadir] [ -l filename] [ -o options] [ -p path] pg_ctl sto ...

  9. 关于BFC的总结

    虽然工作这么多年了,但是如果让我直接解释一下什么是BFC的时候,还是感觉有点不知道怎么准确的表达,下面就翻翻文档,总结一下,加深一下认识吧.大家也可以关注我的GitHub后续的更新 1.BFC的基本概 ...

  10. 容器（collection）初步

    容器(集合)的分类: 泛型(generic):本质是数据类型的参数化(提前告诉编译器,在调用泛型时必须传入实际类型) 例:E即为在主函数中定义的传入的实际类型 class MyCollection&l ...