詳解如何寫出一個利于擴展的vue路由配置

前言

從歷往經(jīng)驗來看，開發(fā)一個新項目，往往在剛開始部署項目，到項目的正式交付，以及交付后的后續(xù)維護(hù)，功能增強等過程，都需要對項目的一些已有結(jié)構(gòu)和邏輯進(jìn)行調(diào)整。

因此，如果有些內(nèi)容剛建項目時不考慮好未來的可擴展性，后續(xù)調(diào)整會很麻煩。

這里先來說，在vue項目中，如何寫路由配置，更利于未來可擴展。

vue-router的基本配置

為了方便新學(xué)者的閱讀與理解。先來看一下最基本的路由是如何配置的

// 0. 導(dǎo)入Vue和VueRouter腳本，如果使用模塊化機制編程，要調(diào)用 Vue.use(VueRouter)

// 1. 定義 (路由) 組件。
// 可以從其他文件 import 進(jìn)來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應(yīng)該映射一個組件。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]

// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
 routes // (縮寫) 相當(dāng)于 routes: routes
})

// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個應(yīng)用都有路由功能
const app = new Vue({
 router
}).$mount('#app')

如果具體還要什么不懂的，還是多看官方文檔 把

便于擴展的路由設(shè)置

到這里我當(dāng)你已經(jīng)比較熟悉路由配置的相關(guān)知識哦，很細(xì)的知識點我就不細(xì)說了。

場景1

假設(shè)你現(xiàn)在接到一個新項目，產(chǎn)品經(jīng)理要求你開發(fā)一個系統(tǒng)，給你的交互圖等資料都是關(guān)于系統(tǒng)內(nèi)部的各個頁面。 這時你以為開發(fā)的這個系統(tǒng)就僅僅是直接展示系統(tǒng)內(nèi)部的情況了，甚至你啥都沒想，就直接開始配置路由寫頁面去了。
一開始你差不多寫出了以下的路由配置：

// example 1
const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 }
  ]
});

像這種配置的，大概就猜出你把系統(tǒng)的菜單等公共部分都放在App.vue里寫好了，然后通過一個<router-view/>進(jìn)行系統(tǒng)內(nèi)容的變更。

場景2

后面產(chǎn)品經(jīng)理跟你說，要系統(tǒng)加一個官網(wǎng)、首頁之類的存在。！！如果你配了按照上述的路由情況，此時，你是不是有點懵呢？因為你把系統(tǒng)的公共內(nèi)容如菜單都寫在App.vue上了，但是首頁不需要系統(tǒng)的這些部分。
盡管你再配出了一個首頁的路由，但是你也要想辦法去掉那些已有的系統(tǒng)公共部分。

解決方案

所以我們不能采用上述配置方式。此時我們應(yīng)該把系統(tǒng)本身作為一個路由，系統(tǒng)公共部分寫在這個路由映射組件上，而系統(tǒng)內(nèi)部各頁作為子路由，嵌套在其下。

// example 2
const router = new VueRouter({
  routes: [
    { 
      path: '/'
      component: Main,
      children: [
        {
          path: '/page1',
          component: Page1
        },
        {
          path: '/page2',
          component: Page2
        }
      ]
    }
  ]
});

這里的Main組件就是系統(tǒng)的入口，菜單等公共部分就是寫在這里
此時App.vue文件的內(nèi)容應(yīng)該就直接是一個路由入口了

<!-- App.vue -->
<template>
  <div>
    <router-view/>
  </div>
</template>

如果你一開始是這么寫的話，那么要新增一些非系統(tǒng)內(nèi)部的頁面，簡直就輕而易舉了。如新增個首頁，直接新增個一級路由就好了

// example 3
const router = new VueRouter({
  routes: [
    { 
      path: '/'
      component: Main,
      children: [...]
    },
    { 
      path: '/home'
      component: Home
    }
  ]
});

但是此時我們應(yīng)該要知道，當(dāng)僅輸入你的網(wǎng)站域名（沒有具體到哪頁）時，會默認(rèn)打開path: /的頁面，上述例子就是默認(rèn)打開系統(tǒng)頁面了。

場景3

你的產(chǎn)品經(jīng)理又來找事啦。再要求你添加個非系統(tǒng)頁，如登錄注冊頁，打開網(wǎng)站地址域名時默認(rèn)跳轉(zhuǎn)到登錄頁。
嗯，按照上一個配置情況，新增一個登錄頁簡直so easy，但是要改默認(rèn)打開頁，這就尷尬了。

有人說，直接把系統(tǒng)的那個一級路由改一下不就好了嘛，然后把path: /留給要求默認(rèn)打開的頁面。

嗯，你說的很有道理，但我，不聽！假設(shè)你系統(tǒng)里有比較多的跳轉(zhuǎn)，從系統(tǒng)內(nèi)某一頁跳轉(zhuǎn)到某一頁的情況多，即你已經(jīng)在代碼里寫了很多個$router.push('xxxx')，如果這么一改，很麻煩，要一個個找出來進(jìn)行修改。

解決方案

因此，我們一開始的時候，就不應(yīng)該為系統(tǒng)頁直接占用path: '/'的路由。但是也不能為目前已知的任何一個頁面占用path: '/'，因為即使你現(xiàn)在明確哪個頁面是默認(rèn)打開頁，但是你不能保證你的產(chǎn)品經(jīng)理不會變心啊，萬一后面又要改呢？

所以！我們要為目前已知的每個頁面都設(shè)置路徑名，而不能占用path: '/'；而實現(xiàn)默認(rèn)打開的功能，就要利用redirect進(jìn)行跳轉(zhuǎn)

// example 4
const router = new VueRouter({
  routes: [
    { 
      path: '/main'
      component: Main,
      children: [...]
    },
    { 
      path: '/home'
      component: Home
    },
    {
      path: 'login',
      component: Login
    },
    {
      path: '/',
      redirect: '/login'
    }
  ]
});

這樣的話，不論后面怎么變化，你只需要做新增/刪除路由 以及 改變redirect值控制打開默認(rèn)頁了。這就是最終的解決方案了

優(yōu)化路由結(jié)構(gòu)內(nèi)容

還是在上一個例子結(jié)論的基礎(chǔ)上進(jìn)行這節(jié)的描述，假設(shè)你的系統(tǒng)比較大，有很多的頁面，很多的模塊，例如菜單欄中有比較多的一級菜單，而每個一級菜單下又有很多二級菜單甚至子孫菜單。

好，就算你現(xiàn)在拿到的需求是很少系統(tǒng)內(nèi)容的，但是你也不能保證以后你的系統(tǒng)會發(fā)展成什么樣，萬一賣得很好，加很多功能需求呢。

在上述假設(shè)的條件下，那么你就得往children里加很多路由映射了

{ 
  path: '/main'
  component: Main,
  children: [...]
}

如此一來，你的這個文件，必定很長很長！因此，我們要拆分，進(jìn)行模塊化引入。

可以以你一級菜單的名字命名進(jìn)行模塊拆分，一個一級菜單對應(yīng)一個文件（如果你的系統(tǒng)有功能模塊的區(qū)分，那也可以按照功能模塊來拆分文件），然后引入到這個主路由配置文件即可。

// example 5
...
import overview from './overview';
import copyrightManager from './copyrightManager';
import monitor from './monitor';

const router = new VueRouter({
  routes: [
    { 
      path: '/main'
      component: Main,
      children: [
        {
          path: '',
          // 默認(rèn)進(jìn)入的系統(tǒng)內(nèi)部頁
          redirect: 'overview'
        },
        ...overview,
        ...copyrightManager,
        ...monitor
      ]
    },
    { 
      path: '/home'
      component: Home
    }
  ]
});

這里例子中就是把原本寫在children里邊的一個個路由映射單獨寫在每個文件里（自己分類好），然后通過import引進(jìn)來，利用...再把它放回進(jìn)去。

這樣維護(hù)起來就更加方便啦

總結(jié)

關(guān)于路由的配置優(yōu)化介紹就說到這里了，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。