vue-router插件作用 修改地址欄路徑時，切換顯示匹配的組件

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

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

VueRouter的使用（5+2）

一、固定5個固定的步驟

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

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

   Vue2對應的是3.6.5版本，口訣：2 3 3（Vue2 VueRouter3.x Vuex3.x），3 4 4（Vue3，VueRouter4.x，Vuex4.x）

   yarn add vue-router@3.6.5
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. 安裝注冊

   由于VueRouter是Vue的插件，所以在實際使用的時候，Vue相關的插件是需要安裝注冊之后再使用的，這個安裝注冊內部，它會幫你去進行一些組件的全局注冊，說白了就是在進行插件的初始化

   Vue.use(VueRouter)
   

4. 創建路由對象

   const router = new VueRouter()
   

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

   雖然在路由對象里面沒有配任何的規則，但是當你注入的那一刻開始，就代表著這個Vue實例已經被我們的VueRouter接管了！

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

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

---

二、代碼示例

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),// 簡寫：routerrouter: router
}).$mount('#app')

---

三、兩個核心步驟

這兩個步驟就是不同的項目配置起來不一樣的

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

   平時組件我們會放在components目錄，但是在路由中，推薦放到views（視圖）目錄

   如果需要往VueRouter中配規則，就需要往里面寫個對象，并且對象中含有routes字段

   數組中包含的每一個對象就是一個規則，path中使用的是地址欄的絕對路徑，是沒有.的

   

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>
   

組件名只有一個單詞時會報錯

解決辦法：目的就是告訴Vue組件的名字是由多個單詞組成的，以 Friend組件 為例

<template><div><p>我的朋友</p><p>我的朋友</p><p>我的朋友</p><p>我的朋友</p></div>
</template><script>
export default {name: 'MyFriend'
}
</script><style></style>

---

四、完整代碼

main.js

import Vue from 'vue'
import App from './App.vue'// 路由的使用步驟 5 + 2
// 5個基礎步驟
// 1. 下載 v3.6.5
// 2. 引入
// 3. 安裝注冊 Vue.use(Vue插件)
// 4. 創建路由對象
// 5. 注入到new Vue中，建立關聯// 2個核心步驟
// 1. 建組件(views目錄)，配規則
// 2. 準備導航鏈接，配置路由出口(匹配的組件展示的位置) 
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter({// routes 路由規則們// route  一條路由規則 { path: 路徑, component: 組件 }routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

---

App.vue

<template><div><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></div>
</template><script>
export default {};
</script><style>
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a:hover {background-color: #555;
}
</style>