vue路由自动注册

最新推荐文章于 2024-09-19 15:17:57 发布

Sunnymeta

最新推荐文章于 2024-09-19 15:17:57 发布

阅读量1.2k

点赞数

分类专栏： vue web前端文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_39425927/article/details/110878156

版权

web前端同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

vue

20 篇文章 1 订阅

订阅专栏

该博客介绍了如何在Vue项目中实现根据src/views文件夹的文件结构自动注册路由。通过require.context函数查找所有index.vue文件，过滤掉父级路由，并将每个页面注册为Vue组件，动态生成路由配置。这简化了路由配置过程，提高了项目维护效率。

摘要由CSDN通过智能技术生成

记录一下vue路由自动注册的一种方式
根据src/views文件夹的路径自动注册路由，文件结构如下：

src
|--view
|----page1 // 页面一
|------components // 页面一的组件
|------index.vue // 页面一的入口组件
|----page2 // 页面2
|------components // 页面2的组件
|------index.vue // 页面2的入口组件
|----index.vue // 公共的布局组件

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
important index from '../views/index.vue'

// 路由自动化注册
const requireComponent = require.context('@/views', true, /index.vue$/) // 找到views路径下的所有文件
const dynamic_route = requireComponent.keys().filter(fileName => {
  if(fileName === './index.vue') { // 过滤掉父节点的路由
    return false
  } else {
    return true
  }
})
.map(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'')// 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
  const componentNameRe = componentName.replace(/\//g,'-') // 设置name为文件夹名-index
  const component = Vue.component(componentNameRe,componentConfig.default || componentConfig) // 根据路径注册成组件
  const result = {
    path: componentName,
    name: componentNameRe,
    component
  }
  return result
})
const routes = [
  {
    path: '/',
    component: index,
    name:'index',
    children: dynamic_route
  }
]
export default routes