admin管理员组

文章数量:1633934

记录一下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

本文标签： 路由vue

版权声明：本文标题：vue路由自动注册 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729177333a1188883.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。