技術標籤：vueweb前端vuevue.js

記錄一下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