vue自動路由-單頁面項目（非build時構建）

博客中自動路由的原理？

答：簡單點說，就是在請求頁面時，根據url進行動態添加路由。

與其它自動路由博客的區別？

目前網上的博客，通常都是在build的時候進行動態路由添加，而本博客，採用的是在得到url請求的時候，進行動態添加。

自動路由有什麼限制嗎？

答：有，由於是經過url進行動態添加，因此，在指定文件夾下，組件文件的相對路徑必須與url有必定的關係。當前demo項目，url路徑與modules文件夾下的組件相對路徑一致。例如：

url地址：localhost:5000/home/index

組件路徑：modules/home/index/index.vue

此方式的自動路由能作些什麼？

答：

1.動態權限控制：在匹配不上路由時，請求後臺獲取是否有權限，根據後臺的反饋處理是否添加路由（是否容許訪問）。

2.自動跳轉首頁、404頁面等頁面

項目demo地址

vue.js單項目自動路由：https://github.com/bobowire/wireboy.samples/tree/master/vue.js/onepage

具體步驟

1.組件生成

在router文件夾下添加import.js文件，代碼以下圖：

 源碼：

module.exports = file => () => import('@/modules/' + file + '.vue')

　　

2.攔截路由

 在src目錄下，添加autoroute.js文件，代碼以下圖：

源碼：

import router from './router'
const _import = require('./router/import')// 獲取組件的方法

router.beforeEach(async (to, from, next) => {
  // 默認的首頁頁面
  if (to.fullPath === '/') {
    next('/home/index')
  } else if (to.matched.length === 0) {
    // 獲取組件路徑
    let componentpath = to.fullPath.substring(1) + '/' + to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1)
    // 添加路由
    router.addRoutes([{
      path: to.fullPath,
      name: to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1),
      component: _import(componentpath)
    }])
    // 路由重匹配
    next({ ...to, replace: true })
  } else {
    next()
  }
})