首页 > 其他分享 >vue-router动态路由无限循环

vue-router动态路由无限循环

时间:2023-08-14 17:45:17浏览次数:32  
标签:vue beforeEach next path router true 路由

// isLogined 用来判断用户是否已登录
router.beforeEach((to, from, next) => {
  if(isLogined){
    next()
  }else{
    console.log('测试')
    next('login')
  }
})


  • next() 表示放行,直接进入to路由,不会再次调用router.beforeEach()
  • next(path:...to,replace:true) 拦截路由,当条件成立时就会无限次放行,进入无限循环,必须要设置出口
  • next(path:'/') 当前路由被中断,进入一个新的导航  、需要加判断、不然会进入无限循环
  • 可以理解为
router.beforeEach((to, from, next) => {
  router.beforeEach((to, from, next) => {
    router.beforeEach((to, from, next) => {
    router.beforeEach((to, from, next) => {
      router.beforeEach((to, from, next) => {
         。。。
})
})
})
})
})
//必须要设置出口

router.beforeEach((to, from, next) => {
   let flag=true
    if(flag){
     //条件成立,放行并进入页面
    next()
    }else{
      //重载路由
      next({path:...to,replace:true})
    } })


标签:vue,beforeEach,next,path,router,true,路由
From: https://www.cnblogs.com/fenfen201510/p/17629286.html

相关文章

  • Vue3 中的v-model实现父子组件数据同步通信
    v-model在vue2中也就是双向绑定作用,但是在vue3中除了实现双向绑定外,还可以进行组件的通信父子组件的数据同步,接下来看看例子:<template><h1>{{num}}</h1><child-eventv-model="num"></child-event></template><scriptlang="ts"setup......
  • vue中使用sockjs
    1,安装依赖npminstallsockjs-client--savenpminstall stompjs--save2,使用混入封装在src下创建mixins文件夹,然后创建sockjs.js文件importSockJSfrom"sockjs-client";importStompfrom"stompjs";exportconstsockjsMixins={data(){return{......
  • vue——qq音乐播放器(1) 左边导航栏样式的实现
    实现结果:左侧导航栏样式实现完整代码:1<template>2<!--左边导航条-->3<divclass="leftnav">4<!--logo-->5<divclass="logo"></div>6<divclass="my-scroll">7......
  • 如何在本地给 vue-router4 扩展功能?
    背景前段时间给基于vue3的H5项目做一些优化,该项目经常会有一些页面间的通信,譬如选择地址、乘机人等信息后回填到上一个页面。对于这种简单、频繁的通信,实在不想搞成重火力(eg:pinia)。最好让使用者用完即走,不用操心除业务逻辑之外的任何事情。路由控制页面通信既然是页面间的......
  • ASP.NET Core中路由规则匹配
    RESTful约束,如果在一个控制器里面有多个Get、Post...的操作1、在一个控制器里面可以定义多个API方法2、通过路由规则来区分///<summary>///获取用户信息///</summary>///<paramname="user"></param>///<returns></returns>[HttpGet]publicUserGetUser(){//...}GetUs......
  • [完结8章]程序员的 AI 启蒙课,ChatGPT 辅助开发 Vue3 项目
    点击下载:程序员的AI启蒙课:ChatGPT让你1人顶3人提取码:8zwd Vue是一款用于构建用户界面的JavaScript框,它基于标准的HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,用以帮助开发者高效地开发用户界面。目前,Vue3.0正式版也发布了两年的时间,越......
  • Angular如何创建路由以及如何配置路由导航
    废话不多说直接进入正题,首先要创建好项目。第一步:安装Angular路由输入以下指令npminstall@angular/router第二部:通过指令创建Angular路由守卫nggguardguards/auth(自定义名字)第二部:在module文件里面导入①路由导航组件②其他类组件,之后再NgModule({declarations:......
  • vue3+typescript中的props
     以上是子组件 以上是父组件<scriptsetuplangs="ts">letprops=defineProps(['info','money'])//父子组件的通信需要用到defineProps方法去接受父组件想要传递的数据console.info(props)</script>需要注意的就是:props可以实现父子组件的通信,但是props的......
  • vue2和vue3中插槽写法区别
    一、slot是什么在HTML中slot元素,作为WebComponents技术套件的一部分,是Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充。(我们可以理解为solt在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承......
  • import.meta.globEager('./src/components/**/*.vue'); 遍历文件
    main.jsconstimportAll=(modules)=>{Object.keys(modules).forEach((key)=>{constcomponent=key.replace('/src/','@/').replace('.vue','');constcomponentName=key.split('/').slice......