美文网首页
问题求助 路由判断(vue)

问题求助 路由判断(vue)

作者: 初入前端的小菜鸟 | 来源:发表于2019-03-01 19:14 被阅读0次

问题简介:

  • 登陆后,后台返回有路由列表。本地写好的有路由列表。通过两者对比,将相同的路由动态加载到路由中
  • 通过for map 等进行对比。进入死循环
// 返回的路由列表 截取一个
  {
    id: 2,
    path: '/Article',
    name: '/Article',
    meta: {
      title: '文章管理',
      icon: '_Article_management'
    },
    component: Main,
    children: [
      {
        id: 21,
        pid: 2,
        path: 'articletype',
        name: 'articletype',
        meta: {
          title: '文章类型列表',
        },
        component: () => import('@/view/Article/articletype/index.vue')
      },
      {
        id: 22,
        pid: 2,
        path: 'article',
        name: 'article',
        meta: {
          title: '文章列表',
        },
        component: () => import('@/view/Article/article/index.vue')
      },
    ]
  }
// 本地路由表
  {
    id: 2,
    path: '/Article',
    name: '/Article',
    meta: {
      title: '文章管理',
      icon: '_Article_management'
    },
    component: Main,
    children: [
      {
        id: 21,
        pid: 2,
        path: 'articletype',
        name: 'articletype',
        meta: {
          title: '文章类型列表',
        },
        component: () => import('@/view/Article/articletype/index.vue')
      },
      {
        id: 22,
        pid: 2,
        path: 'article',
        name: 'article',
        meta: {
          title: '文章列表',
        },
        component: () => import('@/view/Article/article/index.vue')
      },
    ]
  }
  {
    id: 3,
    path: '/Ordering',
    name: '/Ordering',
    meta: {
      title: '订货会管理',
      icon: '_Ordering'
    },
    component: Main,
    children: [
      {
        id: 31,
        pid: 3,
        path: 'web-meeting',
        name: 'web-meeting',
        meta: {
          title: '主题列表'
        },
        component: () => import('@/view/Ordering/web-meeting/index.vue')
      },
      {
        id: 32,
        pid: 3,
        path: 'web-meetingStatus',
        name: 'web-meetingStatus',
        meta: {
          title: '商品上线'
        },
        component: () => import('@/view/Ordering/web-meetingStatus/index.vue')
      },
      {
        id: 33,
        pid: 3,
        path: 'web-meetingCart',
        name: 'web-meetingCart',
        meta: {
          title: '购物车管理'
        },
        component: () => import('@/view/Ordering/web-meetingCart/index.vue')
      }
    ]
  },
  • 两者是相同的。 通过id 进行判断(这样是错误的。因为id 会变动。但是没什么问题。改成其他的也可以)

如何对比两者,避免死循环

死循环产生(当本地多写一组路由数据,就会产生) 现代码本地比返回的数据多一组。产生死循环 求解决

相关文章

  • 问题求助 路由判断(vue)

    问题简介: 登陆后,后台返回有路由列表。本地写好的有路由列表。通过两者对比,将相同的路由动态加载到路由中 通过fo...

  • 关于vue路由守卫做登陆状态判断的问题

    关于vue路由守卫做登陆状态判断的问题 直接上代码 // 全局路由守卫 router.beforeEach((to...

  • 关于vue实现路由拦截登陆判断跳转对应的页面

    关于vue实现路由拦截登陆判断跳转对应的页面

  • keep-alive

    vue-cli v3.0 我这边是使用watch 来判断的路由,根据个人情况来使用。你也可以使用组件路由判断。

  • Vue-在vue中如何使用vue-router

    vue-router作为vue的生态系统一员,帮我们解决了项目中路由的相关问题,包括路由切换,路由拦截等问题。此文...

  • VUE路由判断权限

    可以通过路由去判断是否有权限访问相应页面 使用router.beforeEach,在跳转路由前添加判断

  • 复习3

    vue路由懒加载 1.vue路由懒加载解决的什么 问题:解决打包后文件过大的问题,从而优化页面加载,提升性能 注意...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • vue路由跳转路径错误时出现空白页

    参考:解决vue路由跳转未匹配路径时出现空白页的问题在进行vue项目开发时,常用vue-router进行路由的导航...

  • vue路由问题

    在vue使用过程中,之前一直没注意到一个点 通过a标签进行跳转,页面会被重新渲染,即相当于重新打开一个新的网页,体...

网友评论

      本文标题:问题求助 路由判断(vue)

      本文链接:https://www.haomeiwen.com/subject/arsjuqtx.html