vue路由全面詳解（上）：基本使用、多級路由、工作模式……
目錄
理解
vue 提出了路由 route 的概念。 vue 中的路由 route ，是一組對映關係（ key - value ），key 是路徑，value 是元件，也就是路徑與元件之間的對映。 多個路由需要路由器（router）進行管理。
注意：vue 中的路由 route ，與我們在計算機網路中的路由 沒有任何關係，他們只是 同名 而已！
原始 html 中我們使用 a 標籤實現 html 頁面之間的跳轉，使用路由之後，如果我們進行元件（也就是頁面）切換與跳轉，那麼路由可以幫我們實現區域性切換，不會全部重新整理頁面，節省開銷。
一.基本使用
1.安裝
在建立 vue 專案時，我們可以選擇自定義安裝路由，也可以選擇預設安裝，之後，在終端使用命令安裝：
npm i vue-router
2.應用外掛
在 src資料夾下，新建 router 資料夾，新建檔案 index.js
在 main.js 中引入路由，並應用路由外掛
3.編寫 router 設定項
在 index.js 中寫 router 設定項，將元件與路徑，建立對映關係。
注意：要先引入元件和路由，下面是直接匯入元件
按需匯入元件：只需要將上圖的第9和13行，改為下面的形式即可
component: () => import('../views/Home.vue')
小案例展示：
App 元件中引入 About 和 Home 元件，About 和 Home 元件對映了路由路徑
接下來，我們來實現路由的切換。
第1步，藉助 router-link 標籤
<router-link> </router-link>
<template>
<div class="outer">
<div class="inner">
<!-- Vue中藉助router-link標籤實現路由的切換 -->
<router-link active-class="active" to="/home">Home主頁</router-link>
<div style="margin-top: 20px"></div>
<router-link active-class="active" to="/about">About關於</router-link>
</div>
<div class="inner">
<!-- 指定元件的呈現位置 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style scoped>
.outer{
width: 800px;
height: 800px;
background-color: #bfa;
}
.inner{
text-align: center;
}
</style>
其中：active-class 可設定高亮樣式 ，to 後面是我們所要跳轉的目標路徑 path
<router-view> </router-view>指定元件展示的位置
滑鼠點選 Home主頁，下方切換到 Home 元件的內容；
滑鼠點選 About關於，下方切換到 About 元件的內容，
二、多級路由
在 router 的 index.js 檔案中，可以設定 children 項，實現多級路由。
在App元件中，完成路由切換，注意：要寫完整的路徑
<router-link to="/home/music">Music</router-link>
注意：不需要再寫 <router-view> </router-view> ，頁面中只需要寫一次即可。
三、路由器的兩種工作模式
url中的hash值是：網址中的 #及其後面的內容就是hash值，hash值不會包含在 HTTP 請求中，即：hash值不會帶給伺服器。
-
hash模式：
-
地址中永遠帶著#號，不美觀 。
-
若以後將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法。
-
相容性較好。
-
-
history模式：
-
地址乾淨，美觀 。
-
相容性和hash模式相比略差。
-
應用部署上線時需要後端人員支援，解決重新整理頁面伺服器端404的問題。
-
四、注意事項
-
路由元件通常存放在 pages 資料夾，一般元件通常存放在 components 資料夾。
-
通過切換，「隱藏」了的路由元件，預設是被銷燬掉的，需要的時候再去掛載。
-
每個元件都有自己的 $route 屬性，裡面儲存著自己的路由資訊。
-
整個應用只有一個 router ，可以通過元件的 $router 屬性獲取到。
未完待續……