這裡說的路由拆分指的是將路由的檔案，按照模組拆分，這樣方便路由的管理，更主要的是方便多人開發。具體要不要拆分，那就要視你的專案情況來定了，如果專案較小的話，也就一二十個路由，那麼是拆分是非常沒必要的。但倘若你開發一些功能點較多的商城專案，路由可以會有一百甚至幾百個，那麼此時將路由檔案進行拆分是很有必要的。不然，你看著index.js檔案中一大長串串串串串串的路由，也是很糟糕的。

首先我們在router資料夾中建立一個index.js作為路由的入口檔案，然後新建一個modules資料夾，裡面存放各個模組的路由檔案。例如這裡儲存了一個vote.js投票模組的路由檔案和一個公共模組的路由檔案。下面直接上index.js吧，而後在簡單介紹：

import Vue from 'vue'
import Router from 'vue-router'
 
// 公共頁面的路由檔案
import PUBLIC from './modules/public' 
// 投票模組的路由檔案
import VOTE from './modules/vote' 
 
Vue.use(Router)
 
// 定義路由
const router = new Router({ 
  mode: 'history',routes: [  
    ...PUBLIC,...VOTE,]
})
 
// 路由變化時
router.beforeEach((to,from,next) => {  
  if (document.title !== to.meta.title) {    
    document.title = to.meta.title;  
  }  
  next()
})
 
// 匯出
export default router

首先引入vue和router最後匯出，這就不多說了，基本的操作。

這裡把router.beforeEach的操作寫了router的index.js檔案中，有些人可能會寫在main.js中，這也沒有錯，只不過，個人而言，既然是路由的操作，還是放在路由檔案中管理更好些。這裡就順便演示了，如何在頁面切換時，自動修改頁面標題的操作。

而後引入你根據路由模組劃分的各個js檔案，然後在例項化路由的時候，在routes陣列中，將匯入的各個檔案通過結構賦值的方法取出來。最終的結果和正常的寫法是一樣的。

然後看下我們匯入的vote.js吧：

/** 
 * 投票模組的router列表 
 */
 
export default [  
  // 投票模組首頁  
  {    
    path: '/vote/index',name: 'VoteIndex',component: resolve => require(['@/view/vote/index'],resolve),meta: {      
      title: '投票'    
    }  
  },// 詳情頁  {    
  path: '/vote/detail',name: 'VoteDetail',component: resolve => require(['@/view/vote/detail'],meta: {      
    title: '投票詳情'    
  }  
}] 

這裡就是將投票模組的路由放在一個數組中匯出去。整個路由拆分的操作，不是vue的知識，就是一個es6匯入匯出和結構的語法。具體要不要拆分，還是因專案和環境而異吧。

這裡的路由用到了懶載入路由的方式，如果不清楚，文字上面有介紹到。

還有這裡的meta元欄位中，定義了一個title資訊，用來儲存當前頁面的頁面標題，即document.title。

補充知識：vue的自動化路由+分模組管理+路由懶載入

近期單獨做了一個系統專案，專案不大但是頁面太多了，為了後期維護管理容易，做了個自動化載入路由以及模組化的管理。在此記錄一下。

直接擼程式碼

1.首先看目錄

router下的index.js是路由配置檔案。

views下每個目錄為一個模組，目錄下每個pages資料夾存放頁面。每個模組有一個單獨的.router.js去管理。

2.先以asupmatset.router.js為例子

const arr= [];
function importPages(r,arr) {
 r.keys().forEach((key) => {
  let _keyarr = key.split(".");
  let _path = _keyarr[1];
 
  if (_keyarr[2] === "param") {
   _path = _keyarr[1] + "/:row";
  }
  arr.push({
   path: _path,name: _keyarr[1].substring(1,_keyarr[1].length + 1),component: () => r(key),});
 });
}
fun(require.context("./pages",true,/\.vue$/,"lazy"),arr);
export default arr;

3.再到路由檔案index.js

//檢索每一個模組router.js中的路由
var r=require.context("../views",/\.router\.js/)
var arr=[];
r.keys().forEach((key)=>{
 arr=arr.concat(r(key).default);
})
 
var router = new Router({
 routes: [
  //加入我們拿到的arr陣列
  ...arr
 ]
})
 
export default router

完成~

以上這篇vue路由分檔案拆分管理詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。