Vue 动态路由的实现

最新推荐文章于 2024-07-04 17:04:23 发布

前端农民-晨曦

最新推荐文章于 2024-07-04 17:04:23 发布

阅读量985

点赞数 1

分类专栏： javascript vue vue-router 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_37824255/article/details/115347864

版权

我们在日常开发中，经常会遇到项目需要权限管理的，当项目越来越大的时候，我们还是非常需要做动态路由这一块的，现在我们一起来了解一下如果制作vue的动态路由；

1.基础路由的配置

// router.config.js
import {
    BasicLayout } from '@/layouts'
import {
    bxAnaalyse } from '@/core/icons'

/**
 * 基础路由
 * @type { *[] }
 */
export const constantRouterMap = [
  {
   
    path: '/user',
    component: BlankLayout,
    redirect: '/user/login',
    hidden: true,
    children: [
      {
   
        path: 'login',
        name: 'login',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
      }
    ]
  },

  {
   
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
  }
]

2.实现路由的主体，动态路由做配置

// router index.js
import Vue from 'vue'
import Router from 'vue-router'
import {
    constantRouterMap } from '@/config/router.config'

// hack router push callback
// 重写vue-router的push方法 避免相同路由报错
const originalPush = Router.prototype.push
Router.prototype.push = function push (location, onResolve, onReject) {
   
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(Router)

/**
 * 防止 指向路由重复 报错问题
 * reset-router 文件中 门户切换 重定向到首页(如果当前是在首页中切换就会出现router报错，指向路由重复错误， 使用下面解决函数解决)
 */
const RouterReplace = Router.prototype.replace
Router.prototype.replace