Vue中怎么實(shí)現(xiàn)自動(dòng)化路由，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

禹會(huì)網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,禹會(huì)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為禹會(huì)成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的禹會(huì)做網(wǎng)站的公司定做！

為什么要自動(dòng)化路由

路由自動(dòng)化在于解決以下的問(wèn)題：

• 每次新建頁(yè)面時(shí)的重復(fù)操作：在路由文件中添加對(duì)應(yīng)的路由對(duì)象。

• 路由與代碼耦合：路由依賴于路由對(duì)象的硬編碼，當(dāng)某一路由發(fā)生變動(dòng)時(shí)，勢(shì)必需要修改對(duì)應(yīng)的路由對(duì)象。當(dāng)路由層級(jí)、路徑發(fā)生改變時(shí)，甚至可能面臨的是整個(gè)路由對(duì)象數(shù)組的重寫(xiě)。

• 路由之間進(jìn)行跳轉(zhuǎn)時(shí)的硬編碼。

目的很簡(jiǎn)單，在開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)者僅需要做兩件事即可：

• 為這個(gè)路由命名

• 在對(duì)應(yīng)的目錄下創(chuàng)建 .vue 文件

開(kāi)發(fā)過(guò)程中只需要做這兩步，無(wú)需再去關(guān)心路由對(duì)象如何編寫(xiě)。

甚至可以忽略第一步，對(duì)于小型項(xiàng)目而言。

自動(dòng)化路由規(guī)則

這些規(guī)則一部分是給開(kāi)發(fā)者看，另一部分是給程序看的：

1. 路由目錄需要指定

2. 路由目錄下，每一層（一個(gè)文件夾即為一層） 必須要有一個(gè) Layout.vue 文件，用來(lái)渲染子路由。

3. 路由目錄下的組件路徑即為其對(duì)應(yīng)的路由，比如指定了 src/views 文件夾，里面的 src/views/admin/users 對(duì)應(yīng)的路由即是： localhost/admin/users 。

4. 路由目錄下不區(qū)分大小寫(xiě)，統(tǒng)一轉(zhuǎn)換成小寫(xiě)處理。

以上便是我們制定的自動(dòng)化路由規(guī)則。

定義

先提取出三個(gè)概念：

自動(dòng)化路由的提供者，它就是 對(duì)外開(kāi)放的接口，開(kāi)發(fā)者只需要使用它就可以。

視圖，指的是一個(gè)視圖組件的相關(guān)信息，比如路徑、名稱等等。

路由，指的是解析視圖之后對(duì)應(yīng)的路由對(duì)象，用于生成 vue-router 的路由對(duì)象。

開(kāi)始開(kāi)發(fā)

由于代碼過(guò)長(zhǎng)，這里將代碼上傳至 Github , 有興趣的童鞋可以去看看。

這里只描述一下整體流程以及關(guān)鍵部分的代碼思路。

1. 先通過(guò) require.context 獲取到指定目錄下的所有 .vue 文件。

2. 通過(guò)前綴以及排序操作，將其還原成目錄結(jié)構(gòu)。

3. 通過(guò)還原的目錄結(jié)構(gòu)，進(jìn)行解析。

4. 將解析后的結(jié)構(gòu)轉(zhuǎn)換成路由對(duì)象。

其中最關(guān)鍵的地方便是通過(guò) require.context 獲取到的文件列表還原成原來(lái)的樹(shù)形結(jié)構(gòu)。

還原成樹(shù)形結(jié)構(gòu)之后就可以對(duì)應(yīng)樹(shù)形結(jié)構(gòu)進(jìn)行路由對(duì)象的生成了。

首先將文件列表進(jìn)行排序，根據(jù)文件的深度進(jìn)行排序，深度淺的在前，深的在后。

_getViews(dir) {
  let views = [];

  let keys = dir.keys();
  for (let index in keys) {
    let path = keys[index];
    let component = dir(path);
    views.push(View.create(path, component.default || component))
  }
  views = views.sort((x, y) => { return x.Deep > y.Deep ? 1 : -1; });
  return views;
}

根據(jù)排序后的列表對(duì)目錄結(jié)構(gòu)進(jìn)行還原：

/**
 * 解析views,生成對(duì)應(yīng)的目錄結(jié)構(gòu)
 * @private
 */
_generateDirectory() {
  for (let index in this._views) {
    let view = this._views[index];
    this._directory.addView(view);
  }
}

addView 方法：

addView(view) {
  if(this.isCurrentDirectoryView(view)) {
    this._views.push(view);
  } else if(this._isInSubDirectory(view)) {
    this._addInSubDirectory(view);
  } else {
    let newSubDirectory = this._createSubDirectory(view);
    newSubDirectory.addView(view);
    this._subDirectory.push(newSubDirectory);
  }
}

對(duì)于目錄還原時(shí)有三種可能：

• 這個(gè)文件就是當(dāng)前目錄下的文件

• 這個(gè)文件是當(dāng)前目錄下已有子目錄的文件

• 這個(gè)文件是當(dāng)前目錄下子目錄的文件，且為首次出現(xiàn)

將目錄還原后，就可以根據(jù)目錄生成對(duì)應(yīng)的路由對(duì)象。并且在生成時(shí)可以做一些定制化的需求，比如開(kāi)篇提出來(lái)的需求：

• 如果當(dāng)前文件是 Layout.vue ，即默認(rèn)為當(dāng)前路由的根路由

• 如果當(dāng)前文件是 Index.vue ， 即默認(rèn)為當(dāng)前層的空路由（根路由入口直接渲染）

使用方法，將 router.js 中的路由對(duì)象替換成自動(dòng)生成的即可：

import Vue from 'vue'
import Router from 'vue-router'
import Generator from './routerGenerator/generator';

Vue.use(Router);

let generator = new Generator(require.context('./views', true, /\.vue$/));

export default new Router({
 routes: [generator.generate()]
})

目錄結(jié)構(gòu)如下：

效果如下：

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前文章：Vue中怎么實(shí)現(xiàn)自動(dòng)化路由
文章地址：http://www.chinadenli.net/article2/ggidoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)