前言

創(chuàng)新互聯(lián)主營(yíng)名山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開發(fā),名山h5小程序制作搭建,名山網(wǎng)站營(yíng)銷推廣歡迎名山等地區(qū)企業(yè)咨詢

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

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

這里先來說，在vue項(xiàng)目中，如何寫路由配置，更利于未來可擴(kuò)展。

vue-router的基本配置

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

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

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

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

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

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

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

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

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

場(chǎng)景1

假設(shè)你現(xiàn)在接到一個(gè)新項(xiàng)目，產(chǎn)品經(jīng)理要求你開發(fā)一個(gè)系統(tǒng)，給你的交互圖等資料都是關(guān)于系統(tǒng)內(nèi)部的各個(gè)頁面。 這時(shí)你以為開發(fā)的這個(gè)系統(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里寫好了，然后通過一個(gè)<router-view/>進(jìn)行系統(tǒng)內(nèi)容的變更。

場(chǎng)景2

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

解決方案

所以我們不能采用上述配置方式。此時(shí)我們應(yīng)該把系統(tǒng)本身作為一個(gè)路由，系統(tǒng)公共部分寫在這個(gè)路由映射組件上，而系統(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)的入口，菜單等公共部分就是寫在這里
此時(shí)App.vue文件的內(nèi)容應(yīng)該就直接是一個(gè)路由入口了

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

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

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

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

場(chǎng)景3

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

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

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

解決方案

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

所以！我們要為目前已知的每個(gè)頁面都設(shè)置路徑名，而不能占用path: '/'；而實(shí)現(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'
    }
  ]
});

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

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

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

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

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

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

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

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

// 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里邊的一個(gè)個(gè)路由映射單獨(dú)寫在每個(gè)文件里（自己分類好），然后通過import引進(jìn)來，利用...再把它放回進(jìn)去。

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

總結(jié)

關(guān)于路由的配置優(yōu)化介紹就說到這里了，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。 

當(dāng)前標(biāo)題：詳解如何寫出一個(gè)利于擴(kuò)展的vue路由配置
本文路徑：http://chinadenli.net/article24/gdooce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站收錄、網(wǎng)站制作、網(wǎng)站維護(hù)、域名注冊(cè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)