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> 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>