vue 动态路由添加的问题

vue3中在router/index.js中

import { createRouter, createWebHistory } from 'vue-router';

import store from 'store'

const userRule = {

  path: 'user',

  component: () => import('@/views/user/index.vue'),

  children: [

    {

      path: 'list',

      name: 'userList',

      meta: { title: '用户列表', parents: '用户管理', keepAlive: true },

      component: () => import('@/views/user/userList.vue'),

    },

    {

      path: 'list',

      name: 'userList',

      meta: { title: '用户列表', parents: '用户管理', keepAlive: true },

      component: () => import('@/views/user/userList.vue'),

    }

  ]

}

const operationRule = {

  path: 'opreation',

  component: () => import('views/opreation/index.vue'),

}

const reviewRule = {

  path: 'review',

  component: () => import('views/review/index.vue'),

}

const addissuanceRule = {

  path: 'addissuance',

  component: () => import('views/addissuance/index.vue'),

}

const financeRule = {

  path: 'finance',

  component: () => import('views/finance/index'),

}

const statisticsRule = {

  path: 'statistics',

  component: () => import('views/statistics/index'),

}

const accountRule = {

  path: 'account',

  component: () => import('views/account/index'),

};

//映射相应的 权限

const ruleMapping = {             //匹配路由名字获得对应组件

  'user': userRule,

  'review': reviewRule,

  'operation': operationRule,

  'addissuance': addissuanceRule,

  'finance': financeRule,

  'statistics': statisticsRule,

  'account': accountRule,

}

//基础路由

const routes = [

  {

    path: "/",

    name:'home',

    meta:{title:'首页'},

    component: () => import('views/Home.vue'),

  },

  {

    path: '/login',

    component: () => import('views/Login.vue')

  },

  {

    path: "/:catchAll(.*)",            //思路2.界面的控制:   用户手动输入任何不匹配的路由地址，就转到notFound页

    component: () => import('views/404.vue')

  }

]

const router = createRouter({

  history: createWebHistory(), //createWebHistory  or createWebHashHistory

  routes: routes

})

//动态添加路由

export function initDynamicRoutes() {

  const currentRoutes = router.options.routes;

  //在状态机中获取所有的菜单

  const menuList = store.state.user.menuList;

  //在状态机里获取登录人的权限

  const rights = store.state.user.userInfo.rights;

  menuList.forEach(item => {

    //循环所有的的菜单 通过 authority属性里的权限集合判断是否包含当前权限

    if(item.authority.includes(rights)){

      const temp = ruleMapping[item.name];      //↑↑匹配路由名字获取对应组件

      // currentRoutes[0].children.push(temp);

      //在vue2中可以通过router.addRoutes来添加一个数组，但是vue-router 4.0后没有addRoutes知道手动添加,此时可以通过router.push('/user/userlit')来进行跳转，

      router.addRoute('home',temp)

    }

  })

}

let routerFlag = true;

router.beforeEach((to, from, next) => {

  document.title = to.meta.title

  let userInfo = store.getters['user/users'];

  if (!userInfo && to.path != '/login') {

    next('/login')

  } else {

    //通过router.addRoute动态添加的路由刷新页面后就没了，这里可以通过一个标识符routerFlag来判断，刷新后routerFlag为true,我们在手动添加一次就行了然后变成false

    if(routerFlag){

      initDynamicRoutes();

      console.log(routerFlag);

      next({path:to.path})

      routerFlag = false;

    }else{

      next();

    }

  }

})

export default router;

vue2 中动态添加路由

//动态添加路由

export function initDynamicRoutes(){

   console.log(router);

   const currentRoutes = router.options.routes;

   const rightList = store.state.rightList;            //获取vuex中路由权限数组

   rightList.forEach( item => {

        item.children.forEach(item =>{

             const temp = ruleMapping[item.path];      //↑↑匹配路由名字获取对应组件

             temp.meta = item.rights                   //将二级权限添加到 meta对象中.  思路4:请求&响应的控制就是通过匹配meta中的权限来操作的

             currentRoutes[2].children.push(temp);     //添加到 /home的childern中作为子路由

        })

   })

   router.addRoutes(currentRoutes);

}

巴特西

vue 动态路由添加的问题

vue3中在router/index.js中

vue2 中动态添加路由

最新文章

热门文章