vue 路由的封裝

承接另一篇文章 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';= [
  {
    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);= new VueRouter({
  // routes
  routes:[...routes,...moduleRoute]default      

至此，路由的封裝已完成，子產品再多，封裝的方法也類似，隻是在 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