vue05---路由初體驗01

時間 2019-11-12

標籤 vue05 vue 路由體驗欄目系統網絡简体版

原文原文鏈接

1. 路由初體驗實例

步驟： 1. 引入路由文件。

2. 建立須要的路由組件。

3. 建立路有對象，在這個對象裏配置路由規則這裏用router（名字可隨意取）這個變量來接收vueRouter（名字固定不可改變）路由對象。

4. 經過 routes 屬性配置路由規則，它是一個數組，數組中放的是對象，每個對象對應一條路由規則，並且每一個對象裏都包含name（表示路由規則的名稱） path(表示路徑) component（表示路徑對應的組件）三個參數。

5. 在 vue 實例中注入路由，這樣整個程序都擁有路由了。

6. 使用 router-view 挖一個坑，路徑匹配到的組件都會渲染到這個坑裏面。

注意：在 vue 中使用router-link 去作跳轉，他有一個to屬性，to屬性的屬性值必須和path中路徑對應。router-link未來會被渲染成 a 標籤，to屬性將會被渲染成 a 標籤的 href 屬性，但他的值前面會加一個 # ，變爲錨點。

代碼以下： html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>路由初體驗</title>
 8   <script src="./js/vue2.js"></script>
 9   <!-- 1. 引入路由文件 -->
10   <script src="./js/vue-router-3.0.1.js"></script>
11 </head>
12 <body>
13   <div id="app">
14     <ul>
15       <!-- 在 vue 中使用router-link 去作跳轉，他有一個to屬性，to屬性的屬性值必須和path中路徑對應。router-link未來會被渲染成 a 標籤，to屬性將會被
              渲染成 a 標籤的 href 屬性，但他的值前面會加一個 # ，變爲錨點 -->
16       <li><router-link to="/index">首頁</router-link></li>
17       <li><router-link to="/product">水果</router-link></li>
18       <li><router-link to="/product">蔬菜</router-link></li>
19       <li><router-link to="/product">肉類</router-link></li>
20     </ul>  
21     <!-- 6. 使用 router-view 挖一個坑，路徑匹配到的組件都會渲染到這個坑裏面-->
22     <router-view></router-view>
23   </div>
24   <script>
25     // 2. 建立須要的路由組件
26     var index = Vue.component('index', {
27       template: '<div>首頁</div>'
28     })
29     var product = Vue.component('product', {
30       template: `
31         <div> 這裏顯示產品的編號</div>
32       `
33     })
34     //3. 建立路有對象，在這個對象裏配置路由規則  這裏用router（名字可隨意取）這個變量來接收vueRouter（名字固定不可改變）路由對象
35     var router = new VueRouter({
36       //4. 經過 routes 屬性配置路由規則，它是一個數組，數組中放的是對象，每個對象對應一條路由規則，並且每一個對象裏都包含 name（表示路由規則的名稱）
           path(表示路徑) component（表示路徑對應的組件） 三個參數
37       routes: [
38         {name: 'index', path:'/index', component: index},
39         {name: 'product', path:'/product', component: product}
40       ]
41     })
42     var vm = new Vue({
43       el: '#app',
44       // 5. 在 vue 實例中注入路由， 這樣整個程序都擁有路由了
45       router: router,   //  用 ES6 的語法能夠簡寫爲 router,
46       data: {
47 
48       }
49     })
50   </script>
51 </body>
52 </html>

頁面效果：點擊相應的項，而後顯示對應的組件

2. 用動態建立組件的方法實現上述效果

步驟：1. 引入 vue 文件。

2. 建立須要的組件。

3. 由於咱們想要點擊相應的項，而後顯示對應的組件，咱們只須要動態的顯示 is 後面的值(組件的名稱)，因此is後面的值用一個變量componentId 來保存到數據 data 中,默認開始爲空。

4.把componentId這個變量綁定到is 屬性上即:is="componentId"。

5. 給每一個 li 標籤綁定點擊事件而且在點擊的時候執行顯示對應的組件即變量componentId的值等於對應的組件的名稱。

注意：在點擊事件後面的變量componentId 賦值的時候即組件的名稱必定加上引號。

實例代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>動態建立組件</title>
 8   <!-- 1. 引入 vue 文件 -->
 9   <script src="./js/vue2.js"></script>
10 </head>
11 <body>
12   <div id="app">
13     <ul>  <!-- 注意：在點擊事件後面的變量componentId 賦值的時候 即組件的名稱必定加上引號 -->
14       <li @click="componentId='index'"><a href="#">首頁</a></li>
15       <li @click="componentId='product'"><a href="#">水果</a></li>
16       <li @click="componentId='product'"><a href="#">蔬菜</a></li>
17       <li @click="componentId='product'"><a href="#">肉類</a></li>
18     </ul>
19     <component :is="componentId"></component>
20     <!-- 3. 由於咱們想要點擊相應的項，而後顯示對應的組件，咱們只須要動態的顯示 is 後面的值(組件的名稱)，因此is後面的值用一個變量 componentId 來保存到數據 data 中,默認開始爲空-->
21     <!-- 4. 把componentId這個變量綁定到is 屬性上 即:is="componentId" -->
22      <!-- 5. 給每一個 li 標籤綁定點擊事件 而且在點擊的時候執行顯示對應的組件 即變量componentId的值等於對應的組件的名稱-->
23   </div>
24   <script>
25     // 2. 建立須要的組件
26     //建立首頁組件
27     Vue.component('index',{
28       template: '<div>首頁</div>'
29     })
30     // 建立產品的組件
31     Vue.component('product', {
32       template: '<div>這裏是產品編號</div>'
33     })
34     var vm = new Vue({
35       el: '#app',
36       data: {
37         componentId: ''
38       }
39     })
40   </script>
41 </body>
42 </html>