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

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

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

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

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

1. 后端路由階段

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

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

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

2. 前后端分離

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

前后端分離：

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

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

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

認(rèn)識 vue-router

安裝 Vue-Router

npm install vue-router

步驟：

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