最佳Vue開發實戰系列(一)：設計一個回味無窮的高擴充套件性路由，比義大利麵香【詳解+實踐貼上程式碼】

在接觸Vue的過程中，總能令我驚喜，卻也因不夠老練而帶來了讓人耗時的bug；但都一一過五關，斬六將，勝在好用且好玩。

所以我想跟你一起拆Vue這堵牆，再把它重新搭建的更好！

這也是我準備寫 最佳Vue開發實戰系列 的理由。

還等什麼？ 一鍵三連碼起！

一、什麼是高擴充套件性路由？

與其問什麼是高擴充套件性路由，其實更應該問的是為什麼要高擴充套件性路由？

其實很簡單！

當你做一個專案並且不斷迭代想走得更遠，那麼就只有兩個字 講究！

什麼樣的講究呢？

就是能根據頁面展示結構進行抽象，結合業務模組進行的合理層級劃分。

總結起來就是，要有區分、要規劃，要分門別類且規範。

不會別人看你程式碼或者體驗你的網站就只留下一道菜名。

義大利麵。

好了，言歸正傳。

先品效果圖，一個簡約的實踐。

（如果你是想實踐專案，在這個基礎上開始也是可以的）

不過且慢，這裡還是要提醒一下可能比較迷糊的小夥伴，記得安裝vue-router，否則是玩不起來的，因為vue的路由基於vue-router，所以還沒安裝的小夥伴，網上有很多詳細的安裝教程，這裡就不再贅述啦。

二、效果圖

訪問 /user 路由

訪問 /user/login 路由（這裡訪問根/路由會直接訪問 /user/login ）


訪問 /user/Register 路由

2.2特別福利

加入了好看有意思的載入進度條（類似youtube、csdn網站也有的進度條外掛），可以改自己喜歡的顏色。

記得安裝nprogress，還有匯入nprogress.css哦（網上有很多詳細的安裝教程，這裡就不再贅述啦）

訪問不存在的路由 會有404提醒

三、關鍵程式碼

router.js

router.js父級user路由這裡用簡潔的方式render函式，就不用render再寫一個單檔案路由出口。

{render: h=>h("router-view")}

import()程式碼裡新增註釋webpackChunkName告訴webpack打包後的chunk的名稱（註釋裡的內容不能省掉），打包以後的name就是user。

非同步載入後會被webpack分包，也就是合併包的作用。

import( /* webpackChunkName: "user" */ '../views/User/Login')

四、貼上完整程式碼

App.vue

<template>
<div>
<!-- 設定路由導航 -->
<router-link to="/user/login">登陸</router-link>
<router-link to="/user/Register">註冊</router-link>
<router-view></router-view>
 </div>
</template>
<style>
#nprogress .bar {
 background: rgb(77, 140, 244) !important;
}
</style>

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/router.js';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Login.vue

<template>
<div>
     <h2>登入頁</h2>
</div>
</template>

Register.vue

<template>
<div>
<h2>註冊頁</h2>
</div>
</template>

404.vue

<template>
    <div>┗|｀O′|┛ 嗷~~  404</div>
</template>

router.js

import Vue from 'vue';
import Router from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import NotFound from '../views/404';

Vue.use(Router);

const router =  new Router({
	mode: 'history',
	routes: [
		{path:'/',redirect: '/user/login'},
		{
		path: '/user',
		component: {render: h=>h("router-view")},
		children: [{
				path: 'login',
				name: 'index',
				component: () =>
					import( /* webpackChunkName: "user" */ '../views/User/Login')
			},
			{
				path: 'register',
				name: 'news',
				component: () =>
					import( /* webpackChunkName: "user" */ '../views/User/Register')
			},
			{
				path: '*',
				name: '404',
				component:NotFound
			}
		]
	}]
})

router.beforeEach((to,form,next)=>{
	NProgress.start();
	next();
});

router.afterEach(() => {
	NProgress.done();
});
export default router

五、最後

最後的最後，為了更好的閱讀體驗，我把想說的話都放在了下面，嘿嘿。

我是一顆剽悍的種子 把我會的，認真的分享 是我寫部落格一直不變的信條。
如果你能看到這篇博文，說明我們們還是很有緣的；希望能帶給你一些許幫助，創作的不易， 把我文章的知識帶走，你的三連留下，點贊，評論，關注，是我最大的動力。