承接另一篇文章 vue-cli4 項目框架的搭建 以及 路由的封裝、axios的封裝、公共函數js文件的封裝引用、vuex的基本用法、minins混入、css以及字體圖標和圖片的引入等
這篇文章主要介紹對於vue路由的封裝。
項目中一般都會分為很多模塊，每個模塊都是獨立的，而且每個模塊最好也有自己獨立的路由文件，便於項目后期的拓展和維護。
1、views中的模塊划分
新建 水果、動物模塊。具體文件如圖：
其中以 cat.vue 為例，代碼為：
<template>
<div class="modeleWrap"> 貓咪 模塊開發中... </div>
</template>
<script> export default { } </script>
<style>
</style>
這個只是最簡單的模板，詳細的寫法請移步：vue 組件的空白模板
其余的 dog.vue、apple.vue、orange.vue文件里面的代碼類似，只是文字不同。
其中 animal 文件夾下面的 index.vue 的代碼為：
<template>
<div>
<router-view></router-view>
</div>
</template>
<script> export default { } </script>
fruit 文件夾下面的 index.vue 的代碼和 animal 文件夾下面的 index.vue 的代碼一樣。
這兩個 index.vue 文件的作用主要是作為父組件，加載子組件的內容。
2、路由 router 文件夾下面的代碼
新建一個modules文件夾，里面包含動物模塊的路由文件 animalRoute.js 和 水果模塊的路由文件 fruitRoute.js 。如圖：
其中 animalRoute.js 的代碼為：
//動物 模塊的路由
export const animalRoute = [ { path: "/animal", name: "animal", component: (resolve) => require(["@/views/animal/index.vue"], resolve), //注意這里是作為父組件加載的
children: [ //貓咪
{ path:"cat", //注意，子路由的開頭位置，不要加 / 路徑符
name:"cat", component: (resolve) => require(["@/views/animal/cat/cat"], resolve) }, //狗子
{ path:"dog", name:"dog", component: (resolve) => require(["@/views/animal/dog/dog"], resolve) } ] } ];
其中 fruitRoute.js 的代碼為：
//水果 模塊的路由
export const fruitRoute = [ { path: "/fruit", name: "fruit", component: (resolve) => require(["@/views/fruit/index.vue"], resolve), children: [ //蘋果
{ path:"apple", //注意，子路由的開頭位置，不要加 / 路徑符
name:"apple", component: (resolve) => require(["@/views/fruit/apple/apple"], resolve) }, //橘子
{ path:"orange", name:"orange", component: (resolve) => require(["@/views/fruit/orange/orange"], resolve) } ] } ];
router文件夾下面的 index.js 主路由文件代碼為（自己額外添加或修改的代碼文字標紅顯示）：
注：模塊的路由全部由 import 引入，而由 const 定義的 routes 中后續可以添加登錄頁、主頁、404頁面等等
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) //引入水果，動物模塊的路由
import {fruitRoute} from './modules/fruitRoute'; import {animalRoute} from './modules/animalRoute'; const routes = [ { path: '/', name: 'Home', component: Home }, // {
// path: '/about',
// name: 'About',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// }
//后續這里可以添加 登錄頁、首頁、404頁面 等的路由
] // 整合所有的模塊路由 let moduleRoute = [] .concat(fruitRoute) .concat(animalRoute); const router = new VueRouter({ // routes
routes:[...routes,...moduleRoute] }) export default router
至此，路由的封裝已完成，模塊再多，封裝的方法也類似，只是在 views 中多建立幾個文件夾，router 的 modules 中添加對應的模塊路由。
如果我們啟動項目的默認端口是 8081 的話，頁面默認的 http://localhost:8081/#/ 為：
其中水果模塊的 apple.vue 的訪問地址為：http://localhost:8081/#/fruit/apple ，頁面效果為：
其他文件的訪問路由：
orange.vue ：http://localhost:8081/#/fruit/orange
cat.vue ： http://localhost:8081/#/animal/cat
dog.vue ： http://localhost:8081/#/animal/dog