首页 > 其他分享 >Vue — 导航守卫

Vue — 导航守卫

时间:2024-03-14 12:23:58浏览次数:25  
标签:Vue const next 守卫 导航 路由

Vue 的导航守卫是 Vue Router 提供的一种机制,用于在导航过程中对路由进行控制和管理。通过导航守卫,你可以在路由导航前、导航后、以及路由更新前后等不同阶段执行特定的逻辑操作。

全局前置守卫 (Global Before Guards):

beforeEach(to, from, next):在路由跳转前执行,可以用来进行路由验证、权限控制等操作。

 

//to去哪个地址
//from 从哪儿来
//next是否放行 (1)直接放行到to的路径(2)next(/路径) 进行拦截到next的路径

//定义一个数组存放需要用户登录权限的页面
const authList = ['/pay','/myorder']
router.beforeEach((to,from,next)=>{

  if(!authList.includes(to.path)){
    next()
    return
  }

  const token = ''
  if(token!==''){
    next()
  }else{
    next('/my')
  }


})

 

标签:Vue,const,next,守卫,导航,路由
From: https://www.cnblogs.com/qinlinkun/p/18072579

相关文章

  • 基于java+springboot+vue实现的物业管理系统(文末源码+Lw+ppt)23-23
    摘  要快速发展的社会中,人们的生活水平都在提高,生活节奏也在逐渐加快。为了节省时间和提高工作效率,越来越多的人选择利用互联网进行线上打理各种事务,通过线上物业管理系统也就相继涌现。与此同时,人们开始接受方便的生活方式。他们不仅希望页面简单大方,还希望操作方便,可以快......
  • 基于java+springboot+vue实现的停车场管理系统(文末源码+Lw)23-258
    摘 要如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统停车场管理系统信息管理难度大,容错率低,管理人员处理数据费工费时,所以专门为解决这个难题开发了一个停车场管......
  • 基于java+springboot+vue实现的停车场管理系统(文末源码+Lw)23-258
    摘 要如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统停车场管理系统信息管理难度大,容错率低,管理人员处理数据费工费时,所以专门为解决这个难题开发了一个停车场管......
  • 基于java+springboot+vue实现的美食网站系统(文末源码+Lw+ppt)23-55
    摘   要互联网的兴起从本质上改变了整个社会对信息的管理方式,我国从上个世纪90年代互联网兴起之时,就产生了通过网络进行系统管理的想法。但是由于在互联网上的信誉难以认证、网络的法规政策不健全等一系列的原因,限制了网上信息管理发展的步伐。进入21世纪以后,随着整个社会......
  • Vue学习日记 Day5
    一、路由(续)1、router-link:用于取代a标签 功能: 1、能跳转:配置to属性指定路径(必须),本质上还是a标签(使用to时无需#) 2、默认就会提供高亮类名,可以直接设置高亮样式 语法: <router-linkto="/find"></router-link> 作用: 会为需要高亮......
  • Vue — 请求模块、api模块封装
    1.请求模块importaxiosfrom'axios'constrequest=axios.create({  baseURL:'',//请求的域名地址  timeout:5000,})request.interceptors.request.use((config)=>{  //开启loading禁止背景点击  returnconfig},(err)=>{  returnPro......
  • vue2播放音频组件mp3
    贴代码直接使用,配合了el-slider组件完成父组件data(){return{queryParams{visitTapesList:[{url:'xxxxxx'},{url:'xxxxxx'},{url:'xxxxxx'}]}}}<Audiov-for="(item,inde......
  • vue el-cascader
        <!--选择商品属于哪个内目-->   <el-form-itemlabel="选择分类"style="margin:0020px0;">    <el-cascader     v-model="form.types"     :options="form.typesoptions"     @change=......
  • vueusejs实现拖动
    https://www.vueusejs.com/guide/ npmi-D@vueuse/nuxt@vueuse/corepnpmadd-D@vueuse/nuxt@vueuse/core定义变量constcontentParent=ref();定义div<divclass="lg:flexoverflow-autoh-6/6w-[calc(100%+1rem)]"ref=&quo......
  • Vite+Vue3打包性能优化 Gzip压缩
    安装插件npmivite-plugin-compression-D配置文件//vite.config.tsimportviteCompressionfrom'vite-plugin-compression';exportdefault()=>{return{plugins:[viteCompression({threshold:10240,//设置只有大于10kb的......