本篇文章帶大家詳解Vue全家桶中的Vue-Router，了解一下路由的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

如何快速入門VUE3.0：進(jìn)入學(xué)習(xí)

前端路由的發(fā)展歷程

路由的概念在軟件工程中出現(xiàn)，最早是在后端路由中實(shí)現(xiàn)的，原因是web的發(fā)展主要經(jīng)歷了這樣一些階段：

• 后端路由階段；
• 前后端分離階段；
• 單頁(yè)面富應(yīng)用（SPA）；

1. 后端路由階段

早起的網(wǎng)站開發(fā)整個(gè)HTML頁(yè)面是由服務(wù)器來渲染的，即服務(wù)器直接生產(chǎn)渲染好對(duì)應(yīng)的HTML頁(yè)面, 返回給客戶端進(jìn)行展示。如圖：

優(yōu)點(diǎn)：利于SEO優(yōu)化

缺點(diǎn)：整個(gè)頁(yè)面由后端人員維護(hù)，HTMl代碼以及數(shù)據(jù)對(duì)應(yīng)邏輯會(huì)混合一起，編寫和維護(hù)十分糟糕。

2. 前后端分離

**前端渲染：**每次請(qǐng)求涉及到的靜態(tài)資源都會(huì)從靜態(tài)資源服務(wù)器獲取，這些資源包括HTML+CSS+JS，然后在前端對(duì)這些請(qǐng)求回來的資源進(jìn)行渲染?？蛻舳说拿恳淮握?qǐng)求，都會(huì)從靜態(tài)資源服務(wù)器請(qǐng)求文件，這個(gè)時(shí)候的后端就只是負(fù)責(zé)提供API了。

前后端分離：

• 后端只負(fù)責(zé)提供API，前端通過Ajax 獲取數(shù)據(jù)后通過JavaScript將數(shù)據(jù)渲染到頁(yè)面
• 后端專注于數(shù)據(jù)，前端專注于交互和可視化

單頁(yè)面(SPA)富應(yīng)用階段：

• 在前后端分離的基礎(chǔ)上加了一層前端路由，前端來維護(hù)一套路由規(guī)則
• 核心：改變頁(yè)面URL，但不進(jìn)行頁(yè)面刷新。

認(rèn)識(shí) vue-router

安裝 Vue-Router

npm install vue-router

步驟：

• 創(chuàng)建路由需要映射的組件 【