1、Vue路由，路由的基本概念與原理。
答：1）、路由是一個比較廣義和抽象的概念，路由的本質就是對應關系。
2）、在開發中，路由分為，后端路由和前端路由。
3）、后端路由，根據不同的用戶URL請求，返回不同的內容。后端路由的本質就是URL請求地址與服務器資源之間的對應關系。后端路由根據不同的URL地址分發不同的資源。
4）、前端路由，根據不同的用戶事件，顯示不同的頁面內容。本質就是用戶事件與事件處理函數之間的對應關系。前端路由負責事件監聽，觸發事件后，通過事件函數渲染不同內容。
2、SPA(Single Page Application)。
答：1）、后端路由的渲染，就叫做后端渲染（存在性能問題）。
2）、Ajax前端渲染，前端渲染提供性能，但是不支持瀏覽器的前進后退操作。
3）、SPA(Single Page Application)單頁面應用程序，整個網站只有一個界面，內容的變化通過Ajax局部更新實現，同時支持瀏覽器地址欄的前進和后退操作。
4）、SPA實現原理之一就是基於URL地址的hash，hash的變化會導致瀏覽器記錄訪問歷史的變化，但是hash的變化不會觸發新的URL請求。
5）、在實現SPA過程中，最核心的技術點就是前端路由。
3、路由的基本概念與原理，實現簡易前端路由。
答：1）、基於URL中的hash實現，點擊菜單的時候改變url的hash，根據hash的變化控制組件的切換。
2）、window.onhashchange，監聽window的onhashchange事件，根據獲取到的最新的hash值，切換要顯示的組件的名稱，通過location.hash獲取到最新的hash值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- 被Vue實例控制的div區域 --> 9 <div id="app"> 10 <div v-text="name"></div> 11 <!-- 切換組件的超鏈接 --> 12 <a href="#/zhuye">主頁</a> 13 <a href="#/keji">科技</a> 14 <a href="#/caijing">財經</a> 15 <a href="#/yule">娛樂</a> 16 17 <!-- 根據:is屬性指定的組件名稱,把對應的組件渲染到component標簽所在的位置 --> 18 <!-- 可以把component標簽當作是組件的占位符 --> 19 <component :is="comName"></component> 20 </div> 21 22 <script type="text/javascript" src="js/vue.js"></script> 23 <script type="text/javascript"> 24 /* 創建需要被切換的四個組件 */ 25 var zhuye = { 26 template: '<h1>主頁信息</h1>', 27 }; 28 var keji = { 29 template: '<h1>科技信息</h1>', 30 }; 31 var caijing = { 32 template: '<h1>財經信息</h1>', 33 }; 34 var yule = { 35 template: '<h1>娛樂信息</h1>', 36 }; 37 38 39 /* 創建Vue的實例對象 */ 40 var vm = new Vue({ 41 el: '#app', 42 data: { 43 name: 'hello world!!!', 44 comName: 'zhuye', 45 }, 46 components: { 47 zhuye, 48 keji, 49 caijing, 50 yule, 51 }, 52 }); 53 54 // window.onhashchange，監聽window的onhashchange事件，根據獲取到的最新的hash值，切換要顯示的組件的名稱。 55 window.onhashchange = function() { 56 // 通過location.hash獲取到最新的hash值. 57 console.log(location.hash, location.hash.slice(1)); 58 switch (location.hash.slice(1)) { 59 case '/zhuye': 60 vm.comName = 'zhuye'; 61 break; 62 case '/keji': 63 vm.comName = 'keji'; 64 break; 65 case '/caijing': 66 vm.comName = 'caijing'; 67 break; 68 case '/yule': 69 vm.comName = 'yule'; 70 break; 71 } 72 } 73 </script> 74 </body> 75 </html>
效果，如下所示：
4、Vue Router路由管理器（官網https://router.vuejs.org/zh/），Vue Router是Vue.js官方的路由管理器。
答：1）、Vue Router路由管理器是和Vue.js的核心深度集成，可以非常方便的用於SPA應用程序的開發。Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
2）、包含的功能有：
a、嵌套的路由/視圖表
b、模塊化的、基於組件的路由配置
c、路由參數、查詢、通配符
d、基於 Vue.js 過渡系統的視圖過渡效果
e、細粒度的導航控制
f、帶有自動激活的 CSS class 的鏈接
g、HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
h、自定義的滾動條行為
5、Vue Router路由管理器的基本使用。
答：1）、引入相關的庫文件。
2）、添加路由鏈接。
3）、添加路由填充位。
4）、定義路由組件。
5）、配置路由規則並創建路由實例。
6）、把路由掛載到Vue跟實例中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user">User</router-link> 17 <router-link to="/register">Register</router-link> 18 19 <!-- 第三步,添加路由填充為 --> 20 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 21 <router-view></router-view> 22 </div> 23 24 <script type="text/javascript"> 25 /* 第四步,定義路由組件 */ 26 var User = { 27 template: '<h1>User</h1>', 28 }; 29 var Register = { 30 template: '<h1>Register</h1>', 31 }; 32 33 /* 第五步,配置路由規則並創建路由實例。 */ 34 // 創建路由實例對象 35 var router = new VueRouter({ 36 // routes是路由規則數組 37 routes: [ 38 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 39 // path表示當前路由規則匹配的hash地址 40 // component表示當前路由規則對應要展示的組件 41 { 42 path: '/user', 43 component: User, // 組件名稱,不是字符串 44 }, 45 { 46 path: '/register', 47 component: Register, // 組件名稱,不是字符串 48 } 49 ] 50 }); 51 52 // 創建vm實例對象 53 var vm = new Vue({ 54 // 指定控制的區域 55 el: '#app', 56 data: { 57 58 }, 59 // 第六步,把路由掛載到Vue根實例中 60 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 61 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 62 }); 63 </script> 64 </body> 65 </html>
實現效果如下所示：
6、Vue Router路由管理器，路由重定向。
答：1）、路由重定向指的是，用戶在訪問地址A的時候，強制用戶跳轉到地址C，從而展示特定的組件頁面。
2）、通過路由規則的redirect屬性，指定一個新的路由地址，可以很方便的設置路由的重定向。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user">User</router-link> 17 <router-link to="/register">Register</router-link> 18 19 <!-- 第三步,添加路由填充為 --> 20 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 21 <router-view></router-view> 22 </div> 23 24 <script type="text/javascript"> 25 /* 第四步,定義路由組件 */ 26 var User = { 27 template: '<h1>User</h1>', 28 }; 29 var Register = { 30 template: '<h1>Register</h1>', 31 }; 32 33 /* 第五步,配置路由規則並創建路由實例。 */ 34 // 創建路由實例對象 35 var router = new VueRouter({ 36 // routes是路由規則數組 37 routes: [ 38 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 39 // path表示當前路由規則匹配的hash地址 40 // component表示當前路由規則對應要展示的組件 41 { 42 path: '/user', 43 component: User, // 組件名稱,不是字符串 44 }, 45 { 46 path: '/register', 47 component: Register, // 組件名稱,不是字符串 48 }, 49 /* 其中,path表示需要被重定向的原地址,redirect表示將要被重定向到的新地址 */ 50 { 51 path: '/', 52 redirect: '/user' 53 } 54 ] 55 }); 56 57 // 創建vm實例對象 58 var vm = new Vue({ 59 // 指定控制的區域 60 el: '#app', 61 data: { 62 63 }, 64 // 第六步,把路由掛載到Vue根實例中 65 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 66 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 67 }); 68 </script> 69 </body> 70 </html>
7、Vue Router路由管理器，Vue Router嵌套路由的案例。
答：1）、首先創建父路由組件模板，父級路由鏈接、父組件路由填充位。
2）、然后創建子集路由模板，子級路由鏈接，子級路由填充位。
3）、然后配置嵌套路由配置，父級路由通過children屬性配置子級路由。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user">User</router-link> 17 <router-link to="/register">Register</router-link> 18 19 <!-- 第三步,添加路由填充為 --> 20 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 21 <router-view></router-view> 22 </div> 23 24 <script type="text/javascript"> 25 /* 第四步,定義路由組件 */ 26 var User = { 27 template: '<h1>User</h1>', 28 }; 29 var Register = { 30 template: ` 31 <div> 32 <h1>Register</h1> 33 <hr/> 34 <router-link to="/register/tab1">Tab1</router-link> 35 <router-link to="/register/tab2">Tab2</router-link> 36 37 <router-view></router-view> 38 </div> 39 `, 40 //子級路由填充位置<router-view></router-view> 41 }; 42 43 var Tab1 = { 44 template: '<h1>Tab1</h1>', 45 }; 46 var Tab2 = { 47 template: '<h1>Tab2</h1>', 48 }; 49 50 /* 第五步,配置路由規則並創建路由實例。 */ 51 // 創建路由實例對象 52 var router = new VueRouter({ 53 // routes是路由規則數組 54 routes: [ 55 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 56 // path表示當前路由規則匹配的hash地址 57 // component表示當前路由規則對應要展示的組件 58 { 59 path: '/user', 60 component: User, // 組件名稱,不是字符串 61 }, 62 { 63 path: '/register', 64 component: Register, // 組件名稱,不是字符串 65 // 通過children屬性,為/register添加子路由規則 66 children: [{ 67 path: '/register/tab1', 68 component: Tab1 69 }, 70 { 71 path: '/register/tab2', 72 component: Tab2 73 }, 74 ] 75 }, 76 /* 其中,path表示需要被重定向的原地址,redirect表示將要被重定向到的新地址 */ 77 { 78 path: '/', 79 redirect: '/user' 80 } 81 ] 82 }); 83 84 // 創建vm實例對象 85 var vm = new Vue({ 86 // 指定控制的區域 87 el: '#app', 88 data: { 89 90 }, 91 // 第六步,把路由掛載到Vue根實例中 92 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 93 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 94 }); 95 </script> 96 </body> 97 </html>
8、Vue Router路由管理器，Vue Router動態路由匹配。
答：1）、動態路由匹配，指的是如果某些路由規則一部分是完全一樣的，只有另外一部分是動態變化的，這些動態變化的部分形成路由參數，這些路由參數就叫做動態路由匹配。
2）、動態路徑參數，以冒號開頭，冒號后面的名字就是匹配的名稱，通過動態路由參數的模式進行路由匹配。路由組件中通過$route.params獲取路由參數。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <router-link to="/user/3">User3</router-link> 19 <router-link to="/user/4">User4</router-link> 20 21 <router-link to="/register">Register</router-link> 22 23 <!-- 第三步,添加路由填充為 --> 24 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 25 <router-view></router-view> 26 </div> 27 28 <script type="text/javascript"> 29 /* 第四步,定義路由組件 */ 30 var User = { 31 template: '<h1>User組件,用戶id為: {{$route.params.id}}</h1>', 32 }; 33 var Register = { 34 template: ` 35 <div> 36 <h1>Register</h1> 37 <hr/> 38 <router-link to="/register/tab1">Tab1</router-link> 39 <router-link to="/register/tab2">Tab2</router-link> 40 41 <router-view></router-view> 42 </div> 43 `, 44 //子級路由填充位置<router-view></router-view> 45 }; 46 47 var Tab1 = { 48 template: '<h1>Tab1</h1>', 49 }; 50 var Tab2 = { 51 template: '<h1>Tab2</h1>', 52 }; 53 54 /* 第五步,配置路由規則並創建路由實例。 */ 55 // 創建路由實例對象 56 var router = new VueRouter({ 57 // routes是路由規則數組 58 routes: [ 59 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 60 // path表示當前路由規則匹配的hash地址 61 // component表示當前路由規則對應要展示的組件 62 { 63 path: '/user/:id', // 動態路由匹配 64 component: User, // 組件名稱,不是字符串 65 }, 66 { 67 path: '/register', 68 component: Register, // 組件名稱,不是字符串 69 // 通過children屬性,為/register添加子路由規則 70 children: [{ 71 path: '/register/tab1', 72 component: Tab1 73 }, 74 { 75 path: '/register/tab2', 76 component: Tab2 77 }, 78 ] 79 }, 80 /* 其中,path表示需要被重定向的原地址,redirect表示將要被重定向到的新地址 */ 81 { 82 path: '/', 83 redirect: '/user' 84 } 85 ] 86 }); 87 88 // 創建vm實例對象 89 var vm = new Vue({ 90 // 指定控制的區域 91 el: '#app', 92 data: { 93 94 }, 95 // 第六步,把路由掛載到Vue根實例中 96 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 97 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 98 }); 99 </script> 100 </body> 101 </html>
9、Vue Router路由管理器，路由組件傳遞參數。
答：1）、$route與對應路由形成高度耦合，不夠靈活，所以可以使用props將組件和路由解耦。
2）、props的值為布爾類型。如果props被設置為true。route.params將會被設置為組件屬性。
3）、使用props接收路由參數，直接使用參數名稱來使用路由參數。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <router-link to="/user/3">User3</router-link> 19 <router-link to="/user/4">User4</router-link> 20 21 <router-link to="/register">Register</router-link> 22 23 <!-- 第三步,添加路由填充為 --> 24 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 25 <router-view></router-view> 26 </div> 27 28 <script type="text/javascript"> 29 /* 第四步,定義路由組件 */ 30 var User = { 31 props: ['id'], //使用props接收路由參數 32 template: '<h1>User組件,用戶id為: {{id}}</h1>', // 使用路由參數. 33 }; 34 var Register = { 35 template: ` 36 <div> 37 <h1>Register</h1> 38 <hr/> 39 <router-link to="/register/tab1">Tab1</router-link> 40 <router-link to="/register/tab2">Tab2</router-link> 41 42 <router-view></router-view> 43 </div> 44 `, 45 //子級路由填充位置<router-view></router-view> 46 }; 47 48 var Tab1 = { 49 template: '<h1>Tab1</h1>', 50 }; 51 var Tab2 = { 52 template: '<h1>Tab2</h1>', 53 }; 54 55 /* 第五步,配置路由規則並創建路由實例。 */ 56 // 創建路由實例對象 57 var router = new VueRouter({ 58 // routes是路由規則數組 59 routes: [ 60 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 61 // path表示當前路由規則匹配的hash地址 62 // component表示當前路由規則對應要展示的組件 63 { 64 path: '/user/:id', // 動態路由匹配 65 component: User, // 組件名稱,不是字符串 66 /* 如果props被設置為true。route.params將會被設置為組件屬性。 */ 67 props: true, 68 }, 69 { 70 path: '/register', 71 component: Register, // 組件名稱,不是字符串 72 // 通過children屬性,為/register添加子路由規則 73 children: [{ 74 path: '/register/tab1', 75 component: Tab1 76 }, 77 { 78 path: '/register/tab2', 79 component: Tab2 80 }, 81 ] 82 }, 83 /* 其中,path表示需要被重定向的原地址,redirect表示將要被重定向到的新地址 */ 84 { 85 path: '/', 86 redirect: '/user' 87 } 88 ] 89 }); 90 91 // 創建vm實例對象 92 var vm = new Vue({ 93 // 指定控制的區域 94 el: '#app', 95 data: { 96 97 }, 98 // 第六步,把路由掛載到Vue根實例中 99 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 100 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 101 }); 102 </script> 103 </body> 104 </html>
4）、如果props是一個對象，它會被按原樣設置為組件屬性，對象中有什么數據，組件中就可以接收到什么數據。
5）、props的值為函數類型，如果props是一個函數，則這個函數接收route對象為子級的形參。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <router-link to="/user/3">User3</router-link> 19 <router-link to="/user/4">User4</router-link> 20 21 <router-link to="/register">Register</router-link> 22 23 <!-- 第三步,添加路由填充為 --> 24 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 25 <router-view></router-view> 26 </div> 27 28 <script type="text/javascript"> 29 /* 第四步,定義路由組件 */ 30 var User = { 31 props: ['id', 'uname', 'age'], //使用props接收路由參數 32 template: '<h1>User組件,用戶為: {{id}} {{uname}} {{age}}</h1>', // 使用路由參數. 33 }; 34 var Register = { 35 template: ` 36 <div> 37 <h1>Register</h1> 38 <hr/> 39 <router-link to="/register/tab1">Tab1</router-link> 40 <router-link to="/register/tab2">Tab2</router-link> 41 42 <router-view></router-view> 43 </div> 44 `, 45 //子級路由填充位置<router-view></router-view> 46 }; 47 48 var Tab1 = { 49 template: '<h1>Tab1</h1>', 50 }; 51 var Tab2 = { 52 template: '<h1>Tab2</h1>', 53 }; 54 55 /* 第五步,配置路由規則並創建路由實例。 */ 56 // 創建路由實例對象 57 var router = new VueRouter({ 58 // routes是路由規則數組 59 routes: [ 60 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 61 // path表示當前路由規則匹配的hash地址 62 // component表示當前路由規則對應要展示的組件 63 { 64 path: '/user/:id', // 動態路由匹配 65 component: User, // 組件名稱,不是字符串 66 /* 如果props是一個對象，它會被按原樣設置為組件屬性。 */ 67 /* props: { 68 uname: '張颯颯', 69 age: 12 70 }, */ 71 72 /* 如果props是一個函數， 則這個函數接收route對象為子級的形參 */ 73 /* route對象就是路由中的動態參數對象,路徑中有幾個參數項,route里面就有幾個參數值. */ 74 props: route => ({ // 返回一個props對象 75 uname: '張颯颯', 76 age: 20, 77 id: route.params.id, 78 }) 79 }, 80 { 81 path: '/register', 82 component: Register, // 組件名稱,不是字符串 83 // 通過children屬性,為/register添加子路由規則 84 children: [{ 85 path: '/register/tab1', 86 component: Tab1 87 }, 88 { 89 path: '/register/tab2', 90 component: Tab2 91 }, 92 ] 93 }, 94 /* 其中,path表示需要被重定向的原地址,redirect表示將要被重定向到的新地址 */ 95 { 96 path: '/', 97 redirect: '/user' 98 } 99 ] 100 }); 101 102 // 創建vm實例對象 103 var vm = new Vue({ 104 // 指定控制的區域 105 el: '#app', 106 data: { 107 108 }, 109 // 第六步,把路由掛載到Vue根實例中 110 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 111 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 112 }); 113 </script> 114 </body> 115 </html>
10、Vue Router路由管理器，Vue Router命名路由。
答：1）、為了更加方便的表示路由的路徑，可以給路由規則起一個別名，即為命名路由。
2）、通過命名路由可以實現頁面的跳轉。可以用在編程式導航。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <!-- 要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象： --> 19 <router-link :to="{name:'user',params:{id:123456}}">User3</router-link> 20 <router-link to="/user/4">User4</router-link> 21 22 <router-link to="/register">Register</router-link> 23 24 <!-- 第三步,添加路由填充為 --> 25 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 26 <router-view></router-view> 27 </div> 28 29 <script type="text/javascript"> 30 /* 第四步,定義路由組件 */ 31 var User = { 32 props: ['id', 'uname', 'age'], //使用props接收路由參數 33 template: '<h1>User組件,用戶為: {{id}} {{uname}} {{age}}</h1>', // 使用路由參數. 34 }; 35 var Register = { 36 template: ` 37 <div> 38 <h1>Register</h1> 39 <hr/> 40 <router-link to="/register/tab1">Tab1</router-link> 41 <router-link to="/register/tab2">Tab2</router-link> 42 43 <router-view></router-view> 44 </div> 45 `, 46 //子級路由填充位置<router-view></router-view> 47 }; 48 49 var Tab1 = { 50 template: '<h1>Tab1</h1>', 51 }; 52 var Tab2 = { 53 template: '<h1>Tab2</h1>', 54 }; 55 56 /* 第五步,配置路由規則並創建路由實例。 */ 57 // 創建路由實例對象 58 var router = new VueRouter({ 59 // routes是路由規則數組 60 routes: [ 61 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 62 // path表示當前路由規則匹配的hash地址 63 // component表示當前路由規則對應要展示的組件 64 { 65 path: '/user/:id', // 動態路由匹配 66 component: User, // 組件名稱,不是字符串 67 /* 如果props是一個對象，它會被按原樣設置為組件屬性。 */ 68 /* props: { 69 uname: '張颯颯', 70 age: 12 71 }, */ 72 73 /* 如果props是一個函數， 則這個函數接收route對象為子級的形參 */ 74 /* route對象就是路由中的動態參數對象,路徑中有幾個參數項,route里面就有幾個參數值. */ 75 props: route => ({ // 返回一個props對象 76 uname: '張颯颯', 77 age: 20, 78 id: route.params.id, 79 }), 80 /* 命名路由 */ 81 name: 'user', // 通過路由的name屬性可以實現導航和跳轉功能 82 }, 83 { 84 path: '/register', 85 component: Register, // 組件名稱,不是字符串 86 // 通過children屬性,為/register添加子路由規則 87 children: [{ 88 path: '/register/tab1', 89 component: Tab1 90 }, 91 { 92 path: '/register/tab2', 93 component: Tab2 94 }, 95 ] 96 }, 97 /* 其中,path表示需要被重定向的原地址,redirect表示將要被重定向到的新地址 */ 98 { 99 path: '/', 100 redirect: '/user' 101 } 102 ] 103 }); 104 105 // 創建vm實例對象 106 var vm = new Vue({ 107 // 指定控制的區域 108 el: '#app', 109 data: { 110 111 }, 112 // 第六步,把路由掛載到Vue根實例中 113 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 114 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 115 }); 116 </script> 117 </body> 118 </html>
11、Vue Router路由管理器，Vue Router編程式導航。
答：1）、頁面導航的兩種方式，第一種是聲明式導航，通過點擊鏈接實現導航的方式，叫做聲明式導航，例如普通網頁中的<a></a>鏈接或者vue中的<route-link></route-link>
2）、第二種方式就是編程時航道，通過調用js形式的api實現導航的方式，叫做編程式導航。例如普通網頁中的location.href。
3）、vue中的編程式導航，常用的編程式導航如this.$router.push('hash地址')、this.$route.go(n)實現歷史記錄中的前進和后退，1是前進，-1是后退;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,導入vue文件,為全局window對象掛載vue構造函數 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 導入vue-router文件,為全局window對象掛載vueRouter構造函數 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由鏈接。 --> 15 <!-- router-link是Vue中提供的標簽,默認會被渲染為a標簽, to屬性默認會被渲染為href屬性,to屬性的值默認會被渲染為#開頭的hash地址 --> 16 <router-link to="/user/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <!-- 要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象： --> 19 <router-link :to="{name:'user',params:{id:123456}}">User3</router-link> 20 <router-link to="/user/4">User4</router-link> 21 22 <router-link to="/register">Register</router-link> 23 24 <!-- 第三步,添加路由填充為 --> 25 <!-- 路由填充為也叫做路由占位符,將來通過路由規則匹配到的組件,將會被渲染到router-view所在的位置 --> 26 <router-view></router-view> 27 </div> 28 29 <script type="text/javascript"> 30 /* 第四步,定義路由組件 */ 31 var User = { 32 props: ['id', 'uname', 'age'], //使用props接收路由參數 33 // template: '<h1>User組件,用戶為: {{id}} {{uname}} {{age}}</h1>', // 使用路由參數. 34 /* 編程式導航的使用 */ 35 template: ` 36 <div> 37 <h1>User組件,用戶為: {{id}} {{uname}} {{age}}</h1> 38 <button @click="goRegister">跳轉到注冊頁面</button> 39 </div> 40 `, 41 methods: { 42 goRegister: function() { 43 // 用編程式的方式控制路由跳轉 44 this.$router.push('/register'); 45 } 46 }, 47 }; 48 var Register = { 49 template: ` 50 <div> 51 <h1>Register</h1> 52 <hr/> 53 <router-link to="/register/tab1">Tab1</router-link> 54 <router-link to="/register/tab2">Tab2</router-link> 55 56 <router-view></router-view> 57 58 <button @click="goBack">返回到上一步</button> 59 </div> 60 `, 61 //子級路由填充位置<router-view></router-view>, 62 methods: { 63 goBack: function() { 64 // 用編程式的方式控制路由跳轉 65 this.$router.go('-1'); 66 } 67 }, 68 }; 69 70 var Tab1 = { 71 template: '<h1>Tab1</h1>', 72 }; 73 var Tab2 = { 74 template: '<h1>Tab2</h1>', 75 }; 76 77 /* 第五步,配置路由規則並創建路由實例。 */ 78 // 創建路由實例對象 79 var router = new VueRouter({ 80 // routes是路由規則數組 81 routes: [ 82 // 每個路由規則都是一個配置對象,其中至少包含path和component兩個屬性 83 // path表示當前路由規則匹配的hash地址 84 // component表示當前路由規則對應要展示的組件 85 { 86 path: '/user/:id', // 動態路由匹配 87 component: User, // 組件名稱,不是字符串 88 /* 如果props是一個對象，它會被按原樣設置為組件屬性。 */ 89 /* props: { 90 uname: '張颯颯', 91 age: 12 92 }, */ 93 94 /* 如果props是一個函數， 則這個函數接收route對象為子級的形參 */ 95 /* route對象就是路由中的動態參數對象,路徑中有幾個參數項,route里面就有幾個參數值. */ 96 props: route => ({ // 返回一個props對象 97 uname: '張颯颯', 98 age: 20, 99 id: route.params.id, 100 }), 101 /* 命名路由 */ 102 name: 'user', // 通過路由的name屬性可以實現導航和跳轉功能 103 }, 104 { 105 path: '/register', 106 component: Register, // 組件名稱,不是字符串 107 // 通過children屬性,為/register添加子路由規則 108 children: [{ 109 path: '/register/tab1', 110 component: Tab1 111 }, 112 { 113 path: '/register/tab2', 114 component: Tab2 115 }, 116 ] 117 }, 118 /* 其中,path表示需要被重定向的原地址,redirect表示將要被重定向到的新地址 */ 119 { 120 path: '/', 121 redirect: '/user' 122 } 123 ] 124 }); 125 126 // 創建vm實例對象 127 var vm = new Vue({ 128 // 指定控制的區域 129 el: '#app', 130 data: { 131 132 }, 133 // 第六步,把路由掛載到Vue根實例中 134 // 為了能夠讓路由規則生效,必須把路由對象掛載到Vue實例對象上 135 router: router, // 掛載實例對象,es6中,如果屬性名稱和值一樣可以直接寫成一個屬性名稱即可. 136 }); 137 </script> 138 </body> 139 </html>