Vue router深入學習

一、單頁應用程序介紹

1.概念

單頁應用程序：SPA【Single Page Application】是指所有的功能都在一個html頁面上實現

2.具體示例

單頁應用網站： 網易云音樂 https://music.163.com/

多頁應用網站：京東 https://jd.com/

3.單頁應用 VS 多頁面應用

單頁應用類網站：系統類網站 / 內部網站 / 文檔類網站 / 移動端站點

多頁應用類網站：公司官網 / 電商類網站

4.總結

1.什么是單頁面應用程序?

2.單頁面應用優缺點?

3.單頁應用場景？

二、路由介紹

1.思考

單頁面應用程序，之所以開發效率高，性能好，用戶體驗好

最大的原因就是：頁面按需更新

比如當點擊【發現音樂】和【關注】時，只是更新下面部分內容，對于頭部是不更新的

要按需更新，首先就需要明確：訪問路徑和 組件的對應關系！

訪問路徑 和 組件的對應關系如何確定呢？ 路由

2.路由的介紹

生活中的路由：設備和ip的映射關系

Vue中的路由：路徑和組件的映射關系

3.總結

• 什么是路由
• Vue中的路由是什么

三、路由的基本使用

1.目標

認識插件 VueRouter，掌握 VueRouter 的基本使用步驟

2.作用

修改地址欄路徑時，切換顯示匹配的組件

3.說明

Vue 官方的一個路由插件，是一個第三方包

4.官網

https://v3.router.vuejs.org/zh/

5.VueRouter的使用（5+2）

固定5個固定的步驟（不用死背，熟能生巧）

1. 下載 VueRouter 模塊到當前工程，版本3.6.5

   yarn add vue-router@3.6.5
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. 安裝注冊

   Vue.use(VueRouter)
   

4. 創建路由對象

   const router = new VueRouter()
   

5. 注入，將路由對象注入到new Vue實例中，建立關聯

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

當我們配置完以上5步之后 就可以看到瀏覽器地址欄中的路由 變成了 /#/的形式。表示項目的路由已經被Vue-Router管理了

6.代碼示例

main.js

// 路由的使用步驟 5 + 2
// 5個基礎步驟
// 1. 下載 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安裝注冊 Vue.use(Vue插件)
// 4. 創建路由對象
// 5. 注入到new Vue中，建立關聯import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter()new Vue({render: h => h(App),router
}).$mount('#app')

7.兩個核心步驟

1. 創建需要的組件 (views目錄)，配置路由規則

   

2. 配置導航，配置路由出口(路徑匹配的組件顯示的位置)

   App.vue

   <div class="footer_wrap"><a href="#/find">發現音樂</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a>
   </div>
   <div class="top"><router-view></router-view>
   </div>
   

8.總結

1. 如何實現 路徑改變，對應組件 切換,應該使用哪個插件?
2. Vue-Router的使用步驟是什么(5+2)?

四、組件的存放目錄問題

注意： .vue文件 本質無區別

1.組件分類

.vue文件分為2類，都是 .vue文件（本質無區別）

• 頁面組件 （配置路由規則時使用的組件）
• 復用組件（多個組件中都使用到的組件）

2.存放目錄

分類開來的目的就是為了 更易維護

1. src/views文件夾

   頁面組件 - 頁面展示 - 配合路由用

2. src/components文件夾

   復用組件 - 展示數據 - 常用于復用

3.總結

• 組件分類有哪兩類？分類的目的？
• 不同分類的組件應該放在什么文件夾？作用分別是什么？

五、路由的封裝抽離

問題：所有的路由配置都在main.js中合適嗎？

目標：將路由模塊抽離出來。 好處：拆分模塊，利于維護

路徑簡寫：

腳手架環境下 @指代src目錄，可以用于快速引入組件

總結：

• 路由模塊的封裝抽離的好處是什么？
• 以后如何快速引入組件？