開頭

本菜雞自從入職以來，一直在做相關(guān)的entry task，task1在上一篇文章中指出。此篇文章記錄一下我在task2中的奇思妙想。

task2是從0到1實(shí)現(xiàn)一個(gè)vue2+ts的項(xiàng)目，說實(shí)話vue2+ts真的是難用，有沒有同感的。。

我是一個(gè)react主義者，這次因?yàn)轫?xiàng)目組關(guān)系必須用vue，作為vue小白就記錄一下開發(fā)過程中的一些騷想法。

正文

1. 對(duì)于路由的操作

可能用過umi的同學(xué)知道，umi有一套約定式路由的系統(tǒng)，開發(fā)過程中可以避免每寫一個(gè)頁面就去手動(dòng)import到路由的數(shù)組中，你只需要按照規(guī)則，就可以自動(dòng)化的添加路由。

完美，我們今天就簡(jiǎn)單實(shí)現(xiàn)一個(gè)約定式路由的功能。

首先把vue自己的路由注釋掉

// const routes: Array = [// {// path: "/login",// name: "login",// component: Login,// },// // {// // 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"),// // },// ];

可以看到代碼非常的多，隨著頁面的增加也會(huì)越來越多。當(dāng)然vue的這種方式也有很多好處：比如支持webpack的魔法注釋，支持懶加載

接下來就去實(shí)現(xiàn)我們的約定式路由吧！

我們這次用到的API是require.context，大家可能以為需要安裝什么包，不用不用！這是webpack的東西！具體API的介紹大家可以自行百度了

首先用這玩意去匹配對(duì)應(yīng)規(guī)則的頁面，然后提前創(chuàng)好我們的路由數(shù)組以便使用。

const r = require.context("../views", true, /.vue/);const routeArr: Array = [];

接下來就是進(jìn)行遍歷啦，匹配了../views文件下的頁面，遍歷匹配結(jié)果，如果是按照我們的規(guī)則創(chuàng)建的頁面就去添加到路由數(shù)組中

比如我現(xiàn)在的views文件夾里是這樣的

// 遍歷r.keys().forEach((key) => { console.log(key) //這里的匹配結(jié)果就是 ./login/index.vue ./product/index.vue const keyArr = key.split("."); if (key.indexOf("index") > -1) { // 約定式路由構(gòu)成方案，views文件夾下的index.vue文件都會(huì)自動(dòng)化生成路由 // 但是我不想在路由中出現(xiàn)index，我只想要login，product，于是對(duì)path進(jìn)行改造。 // 這部其實(shí)是有很多優(yōu)化空間的。大家可以自己試著用正則去提取 const pathArr = keyArr[1].split("/"); routeArr.push({ name: pathArr[1], path: "/" + pathArr[1], component: r(key).default, // 這是組件 }); }});

一起來看一下自動(dòng)匹配出來的路由數(shù)組是什么模樣

完美達(dá)成了我們的需求。去頁面看一看！

完美實(shí)現(xiàn)！ 最后把全部代碼送上。這樣就實(shí)現(xiàn)了約定式自動(dòng)注冊(cè)路由，避免了手動(dòng)添加的煩惱，懶人必備

import Vue from "vue";import VueRouter, { RouteConfig } from "vue-router";const r = require.context("../views", true, /.vue/);const routeArr: Array = [];r.keys().forEach((key) => { const keyArr = key.split("."); if (key.indexOf("index") > -1) { // 約定式路由構(gòu)成方案，views文件夾下的index.vue文件都會(huì)自動(dòng)化生成路由 const pathArr = keyArr[1].split("/"); routeArr.push({ name: pathArr[1], path: "/" + pathArr[1], component: r(key).default, // 這是組件 }); }});Vue.use(VueRouter);const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes: routeArr,});export default router;

2.組件

經(jīng)過上一章的操作，我們可以寫頁面了，然后就寫到了組件。我發(fā)現(xiàn)每次使用組件都要在使用的頁面去import，非常的麻煩。

通過上一章的想法，我們是不是也可以自動(dòng)化導(dǎo)入組件呢？

我的想法是：

• 通過一個(gè)方法把components文件下的所有組件進(jìn)行統(tǒng)一的管理
• 需要的頁面可以用這個(gè)方法傳入對(duì)應(yīng)的規(guī)則，統(tǒng)一返回組件
• 這個(gè)方法可以手動(dòng)導(dǎo)入，也可以全局掛載。

先給大家看一下我的components文件夾

再看一下現(xiàn)在的頁面長(zhǎng)相

ok。我們開始在index.ts里擼代碼吧

首先第一步一樣的去匹配，這里只需要匹配當(dāng)前文件夾下的所有vue文件

const r = require.context("./", true, /.vue/);

然后聲明一個(gè)方法，這個(gè)方法可以做到fn('規(guī)則')返回對(duì)應(yīng)的組件，代碼如下。

function getComponent(...names: string[]): any { const componentObj: any = {}; r.keys().forEach((key) => { const name = key.replace(/(\.\/|\.vue)/g, ""); if (names.includes(name)) { componentObj[name] = r(key).default; } }); return componentObj;}export { getComponent };

我們一起來看看調(diào)用結(jié)果吧

打印結(jié)果：

看到這個(gè)結(jié)果不難想象頁面的樣子吧！ 當(dāng)然跟之前一樣啦！當(dāng)然實(shí)現(xiàn)啦！

非常的完美！

最后

由于項(xiàng)目比較急咯，我還有一些騷想法沒有時(shí)間去整理去查資料實(shí)現(xiàn)，暫時(shí)先這樣吧~

如果文內(nèi)有錯(cuò)誤，敬請(qǐng)大家?guī)臀抑赋觯?/p>

總結(jié)

以上是生活随笔為你收集整理的自动化注册路由-如何注册路由器地址的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。