精华内容
下载资源
问答
  • vue3动态注册路由
    千次阅读
    2021-10-07 11:52:24

    在vue-cil2中,我们可以通过webpack中require.context这个api实现工程自动化,而在vue-cil3里vite替代了webpack,节省了webpack冗长的打包时间的同时我们也会失去webpack的此类部分api。

    不过没关系,我们可以使用vite中的 import.meta.glob()异步、import.meta.globEager()同步 来进行替换。

    若是使用import.meta.glob()import.meta.globEager()
    报错没有此方法解决方案,我是在package.json文件中添加:

    "devDependencies": {
        "vite": "^2.5.1",
        "@vitejs/plugin-vue": "^1.6.0",
        "@vue/compiler-sfc": "^3.0.4"
      }
    

    下载vitejs依赖后,在到在vite.config.js文件中添加相关配置解决问题的,原理尚未理清暂时这样

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import path from 'path'
    export default defineConfig({
       base: './',
       resolve: {
          alias: {
             '@': path.resolve(__dirname, 'src'),
          },
       },
       // build: {
       //    outDir: 'dist'
       // },
       plugins: [vue()],
       server: {
          https: false, // 是否开启https
          open: true,  // 是否自动在浏览器打开
          port: 3000,   // 端口号
       },
    })
    

    动态注册路由

    import { createRouter, createWebHistory } from 'vue-router'
    const registerRoute = () => {
       const routerList = []
       const modules = import.meta.globEager('./*/*.rou.js')
       for (const val of Object.values(modules)) routerList.push(val.default)
       return routerList.flat()//用于将嵌套的数组拉平 [1, 2, [3, 4]].flat()// [1, 2, 3, 4] 
    }
    const routes  = [
       {
          path: '/',
          name: 'defaultRouter',
          redirect: { name: 'login' },
       },
       {
          path: '/login',
          name: 'login',
          component: () => import('../views/login/login.vue')
       },
       {
          path: '/template',
          name: 'template',
          redirect:'/coupon', // 设置默认子路由
          component: () => import('../views/template.vue'),
          children:[ ...registerRoute() ]
       }
    ]
    const router = createRouter({
       history: createWebHistory(),
       routes
    })
    export default router;
    
    

    跳转flat()知识点
    待续。。。

    更多相关内容
  • 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子: ...
  • vue3动态路由addRoute

    千次阅读 2022-04-04 19:51:33
    Vue2中,有两种方法实现路由权限动态渲染: router.addRoutes(parentOrRoute, route) //添加单个 router.addRoute(routes) //添加多个 但在Vue3中,只保留了 addRoute() 方法。 首先,假设路由如下: const menu ...

    Vue2中,有两种方法实现路由权限动态渲染:

      router.addRoutes(parentOrRoute, route)    //添加单个
      router.addRoute(routes)                  //添加多个
    

    但在Vue3中,只保留了 addRoute() 方法。

    首先,假设路由如下:

    const menu = [{
      id: 'system-manage',
      name: 'system-manage',
      path: '/system',
      meta:{
        title: '系统管理',
        icon: 'setting',
      },
      compoent: 'layout',
      children: [
        {
          id: 'role',
          name: 'role',
          path: '/system/role',
          meta:{
            title: '角色管理',
            icon: 'user-filled',
          },
          compoent: 'view/system/role',
          children: []
        }
      ]
    }]
    
    // 递归替换引入component
    function dynamicRouter(routers) {
      const list = []
      routers.forEach((itemRouter,index) => {
        list.push({
          ...itemRouter,
          component: ()=>import(`@/${itemRouter.component}`)
        })
        // 是否存在子集
        if (itemRouter.children && itemRouter.children.length) {
          list[index].children = dynamicRouter(itemRouter.children);
        }
      })
    
      return list
    }
    
    // 防止首次或者刷新界面路由失效
    let registerRouteFresh = true
    router.beforeEach((to, from, next) => {
      if (registerRouteFresh) {
        // addRoute允许带children添加,所以循环第一层即可
        dynamicRouter(menu).forEach((itemRouter) => {
          router.addRoute(itemRouter)
        })
        next({ ...to, replace: true })
        registerRouteFresh = false
      } else {
        next()
      }
    })
    
    

    使用这种拼接的方式会导致全局scss多次注入错误,而且需要后台返回文件路径。
    scss报错

    所以改用以下方式:

    // 在本地建一个路由表
    const path = [{
      path: '/system/role',
      name: '角色管理',
      component: () => import('@/views/system/role')
    }]
    
    function dynamicRouter(routers) {
      const list = []
      routers.forEach((itemRouter,index) => {
        // 从本地找组件
        const authRoute = path.find(i=>i.path==itemRouter.path)
        list.push({
          ...itemRouter,
          component: authRoute?.component || Layout //没找到则用默认框架组件
        })
        // 是否存在子集
        if (itemRouter.children && itemRouter.children.length) {
          list[index].children = dynamicRouter(itemRouter.children);
        }
      })
    
      return list
    }
    

    如果出现 Error: Invalid route component ,看下路径是否正确,还有 addRoute 里传的是否是对象,一开始传了数组导致找了半天(扶额

    Invalid route
    以上。

    展开全文
  • vue实现动态路由一步到位

    千次阅读 多人点赞 2020-12-04 18:13:52
    最近在写vue项目,需要由后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由),就是配置vue动态路由啦。 由于错信了一些网上的文章:(,导致在这个问题上耗费了不少时间,想想,还是自己写一...

    最近在写vue项目,需要由后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由),就是配置vue动态路由啦。

    由于错信了一些网上的文章:(,导致在这个问题上耗费了不少时间,想想,还是自己写一篇文章来记录一下那些遇到的坑吧。

    接下来手把手记录一下,如何从零开始配置vue动态路由

    首先呢,先看看静态路由的配置,简单预览一下,熟悉的可以直接跳过,说这部分,是为了熟悉一下路由的配置,配置动态路由其实就是把静态路由存到数据库,在取出来放进路由表(静态是直接写在路由表里)。

    静态路由的回顾

    1.创建router/index.js文件,这里只有一些简单的页面

    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/view/login/Login'
    import Index from '@/layout/Index'
    import Welcome from '@/layout/welcome/Welcome'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
          path: '/',
          component: Index,
          redirect: '/welcome',
          meta: {requireAuth: true},
          children: [
            {
              path: '/welcome',
              component: Welcome,
              name: '首页',
              meta: {title: '首页', requireAuth: true}
            }
          ]
        }
      ]
    })

    2.创建router/permission.js文件,配置导航守卫,可以在每次路由跳转前做一些操作,待会获取动态路由操作也在这里配置

    import router from '@/router/index'
    import 'element-ui/lib/theme-chalk/index.css'
    import '@fortawesome/fontawesome-free/css/all.min.css'
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    
    NProgress.configure({
      easing: 'ease', // 动画方式
      speed: 500, // 递增进度条的速度
      showSpinner: false, // 是否显示加载ico
      trickleSpeed: 200, // 自动递增间隔
      minimum: 0.3 // 初始化时的最小百分比
    })
    // 白名单
    const whiteList = ['/login'] // no redirect whitelist
    
    // 导航守卫
    router.beforeEach((to, from, next) => {
      NProgress.start()
      if (to.meta.requireAuth) {
        // 判断该路由是否需要登录权限
        if (sessionStorage.getItem('loginName') !== null) {
          // 判断本地是否存在token
          next()
          // 这里是待会获取异步路由的地方
        } else {
          // 未登录,跳转到登陆页面
          next({
            path: '/login'
          })
        }
      } else {
        if (whiteList.indexOf(to.path) !== -1) {
          next()
        } else {
          if (sessionStorage.getItem('loginName') !== null) {
            // 判断本地是否存在token
            next(`/?redirect=${to.path}`)
          } else {
            next(`/login?redirect=${to.path}`)
          }
        }
      }
    })
    
    router.afterEach(() => {
      // 在即将进入新的页面组件前,关闭掉进度条
      NProgress.done()
    })
    

    这里引用了一个插件,Nprogress,就是下图的蓝色小进度条。不用也可以

     3.在main.js里引入刚才创建的router下的index.js文件和permission.js文件,如下

    import router from '@/router'
    import './router/permission'
    
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

    4.在App入口中放入路由跳转的视图区,跳转的路由页面都显示在这里

    // APP.vue文件
    <div id="app">
        <router-view />
    </div>

    现在静态路由就配好了,可以正常的跳转了!

    文件夹长这样

    动态路由的配置

    接下来开始配置动态路由了!

    有坑的地方我会说明一下。

    1.首先呢,router/index.js,没有什么需要改的,把你需要动态获取的路由信息删除掉即可,可以留一部分静态路由,如登录页,首页等等,若全删,routes赋为[]即可。

    2.创建一个文件,我命名为getAsyncRouter.js,用来处理获取到的动态路由信息。

    // 用于处理动态菜单数据,将其转为 route 形式
    export function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
      // 用于保存普通路由数据
      let temp = []
      // 用于保存存在子路由的路由数据
      let route = []
      // 遍历数据
      for (let i = 0; i < menuList.length; i++) {
        // 存在子路由,则递归遍历,并返回数据作为 children 保存
        if (menuList[i].children && menuList[i].children.length > 0) {
          // 获取路由的基本格式
          route = getRoute(menuList[i])
          // 递归处理子路由数据,并返回,将其作为路由的 children 保存
          route.children = fnAddDynamicMenuRoutes(menuList[i].children)
          // 保存存在子路由的路由
          routes.push(route)
        } else {
          // 保存普通路由
          temp.push(getRoute(menuList[i]))
        }
      }
      // 返回路由结果
      return routes.concat(temp)
    }
    
    // 返回路由的基本格式
    function getRoute (item) {
      // 路由基本格式
      let route = {
        // 路由的路径
        path: item.url,
        // 路由名
        name: item.name,
        // 路由所在组件
        // component: (resolve) => require([`@/layout/Index`], resolve),
        component: (resolve) => require([`@/view${item.curl}`], resolve),
        meta: {
          id: item.id,
          icon: item.icon
        },
        // 路由的子路由
        children: []
      }
      // 返回 route
      return route
    }

    这里是两个函数,把获取到的数据处理成路由表数据,将其变化成 route 的形式。

    fnAddDynamicMenuRoutes 用于递归菜单数据。
    getRoute 用于返回某个数据转换的 路由格式。
    注释写的应该算是很详细了,主要讲一下思路:
      对数据进行遍历,
      定义两个数组(temp,route),temp 用于保存没有子路由的路由,route 用于保存存在子路由的路由。
      如果某个数据存在 子路由,则对子路由进行遍历,并将其返回结果作为当前数据的 children。并使用 route 保存路由。
      如果某个数据不存在子路由,则直接使用 temp 保存路由。
      最后,返回两者拼接的结果,即为转换后的数据。
    route 格式一般如下:
      path:指路由路径(可以根据路径定位路由)。
      name:指路由名(可以根据路由名定位路由)。
      component:指路由所在的组件。
      children:指的是路由组件中嵌套的子路由。
      meta:用于定义路由的一些元信息。

    这里有个大坑!!! 在配置component的时候,需要动态导入组件,也就是vue异步组件,查看文档如下

     可知,有两种导入方式,import和require方式。这里简单说一下,

    1 import属于es6导入方式,只支持静态导入,也就是说,你不能够使用变量或表达式,只能使用字符串。

    2 require属于commonJS方式,可以支持动态的导入,但笔者尝试中,可以使用``模板字符串方式,貌似也无法直接使用变量。这里尽量用字符串拼接,而不是用变量去代替拼接的字符串

    由于import不支持动态导入方式,笔者采用的是require的方式,并且在webpack文档中有这样一段话。

    clipboard.png

    综上所述,就是说,组件的导入可以使用字符串拼接的方式导入,可以使用模板字符串导入(字符串中含有变量),但是使用模板字符串导入时不能够只使用变量!!必须指定一个目录,不能全用变量代替!

    // 字符串拼接方式
    component: import('@/view'+'/sys/user')
    // 模板字符串方式,webpack4+版本需使用require方式,注意,`@${item.curl}`,是不行的!必须指定一个目录,不能全用变量代替
    component: (resolve) => require([`@/view${item.curl}`], resolve),

    这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行单独打包,所以在工程打包阶段,webpack会进行依赖收集。

    此时,webpack会找到所有import()的调用,将传入的参数处理成一个正则,如:

    import('./app'+path+'/util') => /^\.\/app.*\/util$/
    

    也就是说,import参数中的所有变量,都会被替换为【.*】,而webpack就根据这个正则,查找所有符合条件的包,将其作为package进行打包。

    所以动态导入的正确姿势,应该是尽可能静态化表达包所处的路径,最小化变量控制的区域

    3.有了处理动态路由数据的函数,那就需要在合适的地方调用,以发挥作用。这时就需要用到beforeEach了,在router/permission.js文件,配置导航守卫,可以在每次路由跳转前做一些操作,这里就是获取动态路由了

    import router from '@/router/index'
    import 'element-ui/lib/theme-chalk/index.css'
    import '@fortawesome/fontawesome-free/css/all.min.css'
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    import {fnAddDynamicMenuRoutes} from '@/router/getAsyncRouter'
    import {getRouter} from '@/api/sys/Menu'
    import store from '@/store'
    
    
    NProgress.configure({
      easing: 'ease', // 动画方式
      speed: 500, // 递增进度条的速度
      showSpinner: false, // 是否显示加载ico
      trickleSpeed: 200, // 自动递增间隔
      minimum: 0.3 // 初始化时的最小百分比
    })
    // 白名单
    const whiteList = ['/login'] // no redirect whitelist
    
    // 导航守卫
    router.beforeEach((to, from, next) => {
      NProgress.start()
      try {
        // 判断是否已经获取过动态菜单,未获取,则需要获取一次
        if (store.getters.dynamicRoutes.length === 0) {
          if (whiteList.indexOf(to.path) !== -1) {
            next()
          } else {
            getRouter().then(res => {
              if (res.code === 0) {
                let menuRouter = fnAddDynamicMenuRoutes(res.data[0].children)
                store.dispatch('app/dynamicRoutes', menuRouter).then(() => {
                  router.addRoutes(store.getters.dynamicRoutes)
                  next({...to, replace: true})
                })
              } else {
                console.log('获取动态路由失败!')
                next({path: '/login'})
              }
            })
          }
        } else {
          // 路由已存在或已缓存路由
          if (to.meta.requireAuth) {
            if (sessionStorage.getItem('loginName') !== null) {
              // 判断本地是否存在token
              next()
            } else {
              // 未登录,跳转到登陆页面
              next({path: '/login'})
            }
          } else {
            if (whiteList.indexOf(to.path) !== -1) {
              next()
            } else {
              if (sessionStorage.getItem('loginName') !== null) {
                // 判断本地是否存在token
                next(`/?redirect=${to.path}`)
              } else {
                next(`/login?redirect=${to.path}`)
              }
            }
          }
        }
      } catch (error) {
        console.log('出错了')
        next(`/login?redirect=${to.path}`)
      }
    })
    
    router.afterEach(() => {
      // 在即将进入新的页面组件前,关闭掉进度条
      NProgress.done()
    })
    
    

    注释写的比较详细了,主要说下思路:

    • 首先确定获取动态菜单数据的时机。一般在登录成功跳转到主页面时,获取动态菜单数据。

          由于涉及到路由的跳转(登录页面 -> 主页面),所以可以使用 beforeEach 进行路由导航守卫操作。
          但由于每次路由跳转均会触发 beforeEach ,所以为了防止频繁获取动态路由值,这里采用vuex方式存储了获取的路由信息,如果已获取路由,就直接跳转,否则就获取一次动态菜单数据并处理。

    • 如果不采用vuex方式也可以存到sessionStorage里面,总之就是保存一下获取的路由信息,以免重复获取。

    4接下来看一看,store的写法

    
    const state = {
      dynamicRoutes: []
    }
    
    const mutations = {
      DYNAMIC_ROUTES (state, routes) {
        state.dynamicRoutes = routes
      }
    }
    
    const actions = {
      dynamicRoutes ({commit}, routes) {
        commit('DYNAMIC_ROUTES', routes)
      }
    }
    

    注意:vue是单页面应用程序,所以页面一刷新数据部分数据也会跟着丢失,所以我们需要将store中的数据存储到本地,才能保证路由不丢失。

    到这里,动态路由就已经配置好了,总体来说不是很难,主要是有坑!但只要理清了思路,写起代码就会很清晰。

    说一些笔者遇到的问题,

    1.首先是component动态导入的问题,由于webpack的版本不同,需要根据情况来采用import和require方式来导入,如果导入不正确多半会报错,找不到module等等。或者不报错,但路由跳转是空白页。如果导入正确则一定可以跳转正常,否则,请查找正确的导入方法!路由跳转正确,能显示跳转的组件,就完成了一大半!

    2.路由的跳转的地方,由于我们项目采用的是左侧菜单栏,有二级菜单,所以当路由跳转正常时,还需确定路由跳转所渲染的位置是否正确!

    后记:

    在刷新页面时遇到一个问题,动态路由表会随着vuex的刷新而消失。

    处理:这里在app.vue页面刷新时利用sessionStorage存储一下store,防止刷新丢失vuex。

    如下:

    export default {
      name: 'App',
      created () {
        // 在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem('storeData')) {
          this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('storeData'))))
        }
        // 在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener('beforeunload', () => {
          sessionStorage.setItem('storeData', JSON.stringify(this.$store.state))
        })
        // 兼容iphone手机
        window.addEventListener('pagehide', () => {
          sessionStorage.setItem('storeData', JSON.stringify(this.$store.state))
        })
      }
    }

    另外,在登录成功后也获取了一下动态路由。这样处理下来,刷新时也不会丢失路由了!

    // 获取动态路由
    getRouter().then(res => {
      if (res.code === 0) {
        let menuRouter = fnAddDynamicMenuRoutes(res.data[0].children)
        store.dispatch('app/dynamicRoutes', menuRouter).then(() => {
          router.addRoutes(store.getters.dynamicRoutes)
        })
        console.log(store.getters.dynamicRoutes)
      } else {
        console.log('获取动态路由失败!')
        router.push('/login')
      }
    })

    展开全文
  • vue3动态添加路由

    2021-08-10 08:36:28
    这儿的home就是一级路由的名字

    在这里插入图片描述
    这儿的home就是一级路由的名字

    展开全文
  • Vue3路由-VueRouter之动态添加路由和导航守卫的使用 router-link的v-slot 在vue-router3.x的时候,router-link有一个tag属性,可以决定router-link到底渲染成什么元素: 但是在vue-router4.x开始,该属性被移除了;...
  • vue实现动态路由

    千次阅读 2021-05-28 15:38:43
    import('@/layouts/Main.vue'), parentView: () => import('@/layouts/parentView'), } // 路由组件注册 export const routerMap = { 'demo/home': { title: '首页', component: view.Layout, },
  • 主要给大家介绍了关于vue路由教程之静态路由的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 1 什么的动态路由 根据路径不同,显示内容不同。就像图片路径:image/1 ,其中变化的就是这个“1”,根据这个数字的变化会展示不同的图片。 2 页面编写 在src/components路径下创建item.vue,其中内容为(当然你也可以...
  • vue实现动态路由俩种方式

    千次阅读 2022-04-20 11:10:58
    在router文件中引入一级路由以及详情页路由 import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/home/Home.vue"; import About from "../views/about/About.vue"; import ...
  • Vue3 + vite2.0 + addRoutes 动态路由

    千次阅读 2021-12-09 11:03:09
    使用vite创建的vue3项目加载动态路由
  • vue3.0中,做了个动态添加权限路由的功能,可是死活不行 问题描述: 使用router.addRoute添加好路由之后,输入路由地址死活访问不了,提示没有匹配到这个路由 但是把路由实例(router.getRoutes())打出来却又...
  • vue项目实现动态路由的方式大体可分为两种: 1.第一种就是我们前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 详情可以看看这个人写的,感觉挺好的...
  • vue动态添加路由清空路由

    千次阅读 2021-06-09 17:44:17
    刚做的项目分多个模块,点击后再查询菜单,动态加进路由,直接动态添加则爆出警告信息(路由重复): 于是乎想到了先清空路由: resetRouter() { const newRouter = new Router({ mode: 'hash', // ...
  • vue3路由的配置

    千次阅读 2021-06-24 10:34:05
    使用 vue3 配置路由,步骤如下 1、安装路由 npm install vue-router@4 2、新建页面 这里创建 view目录,然后在view目录下创建 A.vue B.vue 两个 vue页面文件 A.vue内容 <template> <div>A</div&...
  • 一.动态路由概念?如何实现? 1.在后台管理系统当中,我们的路由表一般分为...3.动态填加的路由需要处理下,因为后端传给你的是树状结构,前端需要把树结构处理成列表结构(通过 递归,不断的获取路径,名字那些信息)
  • vue中如何实现动态路由传参?

    千次阅读 2021-09-02 10:45:32
    一、vue路由基础用法: 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由:引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由:引入并创建组件 import BYHome from './...
  • 系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心...Vue提高篇三:使用vue-router实现动态路由 文章目录系列文章目录一、背景二、动态路由2.1 使用方式2.1 完整实现 一、背景 我们经常需要
  • vue动态路由的理解与使用

    千次阅读 2019-05-27 01:47:19
    1. 动态路由传参 1.1使用query传参,name属性为要跳转的组件所对应的name,query为要携带的参数 <router-link :to="{name:'mainContent','query':{links:'recommend'}}"> </router-link> 1.2 使...
  • vue3.x+element-plus 实现动态路由菜单功能
  • 介绍:作为一个前端新手,项目中遇到权限处理时,通常会采用动态添加路由的方法来实现,此方法会在登陆时利用vuex将用户信息以及菜单栏需要展示的菜单路由保存,这样在用户第一次登陆项目时,动态渲染的菜单路由页面...
  • 项目场景: 在项目开发中会有这么一个需求:不同的角色对应的权限不一样也就意味着所展现的菜单也会不一致,因此我们需要实现一个动态路由,在这过程中遇到了一个棘手的问题,也就是标题所说的,特写本文作为记录 ...
  • vue3 使用addRoute动态添加路由,兼解决刷新空白或跳到404页面问题
  • vue router 动态路由清除

    千次阅读 2021-09-07 16:13:34
    重置matcher可达到路由还原效果 在用户退出时调用 resetRouter(router) 即可还原路由 import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap } from '...' //导入初始化router // ...
  • 一、动态菜单显示 1. 后端返回的菜单数据处理 后端返回的菜单数据一般有两种,处理好的树状结构、或者未处理的列表数据(这种情况需要我们去转换成树状结构,可看我的另外一篇博客【js树形结构操作】)。 下面是后端...
  • router/index.js中只配置登录页面及首页的路径,其他页面在点击菜单时动态添加;...使用vue开发开发工具查询路由确实添加了,但是访问的页面却是一片空白。请问这样写有问题吗?正确的应该怎么写?
  • vue动态路由:根据菜单内容动态赋予用户权限,不再需要拿到用户的role等内容,可在用户权限较多的情况下使用。
  • 配置路由权限 在config文件夹下router.config.js中配置路由权限 如下图所示 配置请求网络接口 在api文件夹下login.js中 根据自己后台的数据修改路由权限封装规则 在store/module/user.js中修改GetInfo方法 源...
  • 第6.1.3 vue动态路由初探

    千次阅读 2018-03-29 10:18:05
    我看到的动态路由的写法,但是我自己亲自尝试,连一个登陆页面也出不来。 在Vue2项目构建心得,我也看到了同样的构建方法 懒加载的目的不言而喻 先看看_import_development.js中的内容 module.exports ...
  • Vue3 如何使用 vue-router 以及路由权限拦截

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 161,266
精华内容 64,506
关键字:

vue3动态路由