前端【VUE】07-vue【路由】

为你编程發表於2024-04-08
前端Vue路由

一、路由

單頁應用程式: SPA - Single Page Application

　　

　　

VueRouter 的 介紹

　　作用：修改位址列路徑時，切換顯示匹配的元件
　　說明：Vue 官方的一個路由外掛，是一個第三方包
　　官網：https://v3.router.vuejs.org/zh/
　　vue2 對應 router3
　　vue3 對應 router4

VueRouter 的 使用

　　

　　

1、下載

1 npm  i  vue-router@3.6.5

2、專案中新增views目錄，存放各個檢視頁面

views/Find.vue

 1 <template>
 2   <div>
 3     <p>我的音樂</p>
 4     <p>我的音樂</p>
 5     <p>我的音樂</p>
 6     <p>我的音樂</p>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'MyMusic'
13 }
14 </script>
15 <style>
16 </style>

views/Friend.vue

 1 <template>
 2   <div>
 3     <p>我的朋友</p>
 4     <p>我的朋友</p>
 5     <p>我的朋友</p>
 6     <p>我的朋友</p>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'MyFriend'
13 }
14 </script>
15 <style>
16 </style>

views/My.vue

 1 <template>
 2   <div>
 3     <p>我的音樂</p>
 4     <p>我的音樂</p>
 5     <p>我的音樂</p>
 6     <p>我的音樂</p>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'MyMusic'
13 }
14 </script>
15 <style>
16 </style>

3、根元件App.vue中新增路由出口，也就是用來路由到不同檢視的位置

 1 <template>
 2   <div>
 3     <div class="footer_wrap">
 4       <a href="#/find">發現音樂</a>
 5       <a href="#/my">我的音樂</a>
 6       <a href="#/friend">朋友</a>
 7     </div>
 8     <div class="top">
 9       <!-- 路由出口 → 匹配的元件所展示的位置 -->
10       <router-view></router-view>
11     </div>
12   </div>
13 </template>
14 
15 <script>
16 export default {};
17 </script>
18 
19 <style>
20 body {
21   margin: 0;
22   padding: 0;
23 }
24 .footer_wrap {
25   position: relative;
26   left: 0;
27   top: 0;
28   display: flex;
29   width: 100%;
30   text-align: center;
31   background-color: #333;
32   color: #ccc;
33 }
34 .footer_wrap a {
35   flex: 1;
36   text-decoration: none;
37   padding: 20px 0;
38   line-height: 20px;
39   background-color: #333;
40   color: #ccc;
41   border: 1px solid black;
42 }
43 .footer_wrap a:hover {
44   background-color: #555;
45 }
46 </style>

4、main.js中定義路由，並且註冊到vue例項中，後續寫專案會將路由單獨寫到router目錄下index.js中，透過export匯出定義的路由元件，然後在main.js中匯入定義的路由進行註冊

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 
 4 // 路由的使用步驟 5 + 2
 5 // 5個基礎步驟
 6 // 1. 下載 v3.6.5
 7 // 2. 引入
 8 // 3. 安裝註冊 Vue.use(Vue外掛)
 9 // 4. 建立路由物件
10 // 5. 注入到new Vue中，建立關聯
11 
12 // 2個核心步驟
13 // 1. 建元件(views目錄)，配規則
14 // 2. 準備導航連結，配置路由出口(匹配的元件展示的位置) 
15 import Find from './views/Find'
16 import My from './views/My'
17 import Friend from './views/Friend'
18 import VueRouter from 'vue-router'
19 Vue.use(VueRouter) // VueRouter外掛初始化
20 
21 const router = new VueRouter({
22   // routes 路由規則們
23   // route  一條路由規則 { path: 路徑, component: 元件 }
24   routes: [
25     { path: '/find', component: Find },
26     { path: '/my', component: My },
27     { path: '/friend', component: Friend },
28   ]
29 })
30 
31 Vue.config.productionTip = false
32 
33 new Vue({
34   render: h => h(App),
35   router
36 }).$mount('#app')

元件存放目錄問題

　　

路由的封裝抽離

　　

1、目錄結構

　　

2、路由目錄

　　router/index.js

 1 import Find from '@/views/Find'
 2 import My from '@/views/My'
 3 import Friend from '@/views/Friend'
 4 
 5 import Vue from 'vue'
 6 import VueRouter from 'vue-router'
 7 Vue.use(VueRouter) // VueRouter外掛初始化
 8 
 9 // 建立了一個路由物件
10 const router = new VueRouter({
11   // routes 路由規則們
12   // route  一條路由規則 { path: 路徑, component: 元件 }
13   routes: [
14     { path: '/find', component: Find },
15     { path: '/my', component: My },
16     { path: '/friend', component: Friend },
17   ]
18 })
19 
20 export default router

3、檢視目錄

views/Find.vue

 1 <template>
 2   <div>
 3     <p>發現音樂</p>
 4     <p>發現音樂</p>
 5     <p>發現音樂</p>
 6     <p>發現音樂</p>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'FindMusic'
13 }
14 </script>
15 <style>
16 </style>

views/Friend.vue

 1 <template>
 2   <div>
 3     <p>我的朋友</p>
 4     <p>我的朋友</p>
 5     <p>我的朋友</p>
 6     <p>我的朋友</p>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'MyFriend'
13 }
14 </script>
15 <style>
16 </style>

views/My.vue

 1 <template>
 2   <div>
 3     <p>我的音樂</p>
 4     <p>我的音樂</p>
 5     <p>我的音樂</p>
 6     <p>我的音樂</p>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'MyMusic'
13 }
14 </script>
15 <style>
16 </style>

4、根元件App.vue

 1 <template>
 2   <div>
 3     <div class="footer_wrap">
 5       <a href="#/find">發現音樂</a>
 6       <a href="#/my">我的音樂</a>
 7       <a href="#/friend">朋友</a>
 8     </div>
 9     <div class="top">
10       <!-- 2、路由出口 → 匹配的元件所展示的位置 -->
11       <router-view></router-view>
12     </div>
13   </div>
14 </template>
15 
16 <script>
17 export default {};
18 </script>
19 
20 <style>
21 body {
22   margin: 0;
23   padding: 0;
24 }
25 .footer_wrap {
26   position: relative;
27   left: 0;
28   top: 0;
29   display: flex;
30   width: 100%;
31   text-align: center;
32   background-color: #333;
33   color: #ccc;
34 }
35 .footer_wrap a {
36   flex: 1;
37   text-decoration: none;
38   padding: 20px 0;
39   line-height: 20px;
40   background-color: #333;
41   color: #ccc;
42   border: 1px solid black;
43 }
44 .footer_wrap a:hover {
45   background-color: #555;
46 }
47 </style>

5、main.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import router from './router/index'
 4 
 5 Vue.config.productionTip = false
 6 
 7 new Vue({
 8   render: h => h(App),
 9   router
10 }).$mount('#app')

相關文章