首页 > 其他分享 >vue路由配置和拦截

vue路由配置和拦截

时间:2022-08-23 15:23:02浏览次数:42  
标签:vue 登录 next 跳转 拦截 路由 页面

router.beforeEach()一般用来做一些进入页面的限制。比如是否是登录状态,若没有登录,就不能进入某些页面,只有登录成功后,才有权限查看某些页面,简单地说,就是通过vue的路由来实现页面的拦截和页面的跳转,来符合产品设计的某些规则。

 

下面以登录页面的权限,为例:

思路:
【 如果(即将进入的页面不是登录页面){
// 非login页面,检查是否登录 如果(没有登录){
       // 未登录,就跳转到登录页面去 就让这个老哥跳转到登录页面,先进行登录的相关操作 }否则{ 就让这个老哥进入这个页面 } }(即将进入的页面是登录页面) { 就让这个老哥进入登录页面,进行登录的相关操作 } 】

对应代码:

router.beforeEach((to,from,next)=>{
    if(to.name !== "Login"){
        // 非login页面,检查是否登录
        if(!isUserLogin){
            // 未登录,则跳转到登录页面去
            next({name:"Login"})
        }else{
            next()
        }
    }else{
     // 登录页面 next() } })

 

标签:vue,登录,next,跳转,拦截,路由,页面
From: https://www.cnblogs.com/pwindy/p/16616285.html

相关文章

  • vue大文件上传插件选哪个好?
    ​4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很......
  • vue项目目录结构划分
     1.dist---编译之后的项目文件2.src---开发目录3.src/assets---静态资源src/assets/less---公共lesssrc/assets/img---图片资源4.src/components---组件5.src/pag......
  • 一天一个知识点-----vue项目简单引入svg
    项目背景:vue3.0+elementPlus注意项目结构,主要涉及的几个文件及文件夹---直接上代码----1.最开始是要下载包npminstallsvg-sprite-loader2.配置项目的配置文件vu......
  • vue3 单文件组件——父组件访问子组件的实例
    如果一个子组件使用的是选项式API 或没有使用 <scriptsetup>,被引用的组件实例和该子组件的 this 完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问......
  • vue大文件上传组件选哪个好?
    ​一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到......
  • ng-alain解决新版本发布后前端存在缓存而导致路由出错问题
    app.component.tsimport{Component,ElementRef,OnInit,Renderer2}from'@angular/core';import{NavigationEnd,NavigationError,RouteConfigLoadStart,Rout......
  • Vue项目跑不起来 Uncaught SyntaxError: The requested module '/node_modules/.vit
    一:问题介绍vue项目运行跑不起来提示Browserslist:caniuse-liteisoutdated.Pleaserunnpxbrowserslist@latest--update-db遇到这个情况首先想到重新安装依赖重启项目......
  • vue3源码学习
    建议先通过官方指南了解3.0都干了啥、解决了什么问题。然后才是阅读其源码(通过利器),进阶了解它是如何实现的。https://juejin.cn/post/6925668019884523534......
  • 创建一个VUE项目
    前期准备1、安装node,官网安装(自带npm)2、安装npm国内镜像cnpm:npminstall-gcnpm;安装后可能在项目中无法使用,执行cnpminstallexpress-g3、安装开源前端打包工具webpa......
  • vue3新内置组件teleport传送门
    使用到的原因:在使用固定定位弹出弹出框的时候,突然遇到位置不正确,而且在有index高级别的情况下依旧位置出错表现如下:出现原因:我的代码出现的tf元素,导致定位祖先元素发......