在說 VueRouter 之前，首先要弄明白vueRouter 是幹什麼的，有什麼用
說出來其實很簡單，就是一個模闆替換的問題，當路由改變的時候，把和路由相關的模闆顯示出來，就是這麼簡單。但是，當我們不知道為什麼的時候，即使瞎貓碰到死耗子做出來了，也不知道是怎麼回事，下次仍然是不會，我想，我們應該要有追根究底的精神
1. 首先，寫html ,因為不論是替換與否，我們都是通過html來執行的，定義要替換的
2. 寫替換模闆
3.注冊vue對象，及替換要修改的變量即data
4.定義路由的映射關系
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 <script src="../js/vue.js"></script>
8 <script src="../js/vue-router.js"></script>
9 <title>Document</title>
10 </head>
11 <body>
12 <div id="app">
13 <div>
14 <!-- 書寫連結按鈕，也就是a标簽 -->
15 <a v-link="{path:\'/home\'}">Home</a>
16 <a v-link="{path:\'/about\'}">About</a>
17 </div>
18 <!-- 要使用路由替換的地方 ，先整出一個框框出來-->
19 <router-view></router-view>
20 </div>
21 <!-- 模闆替換的内容1 -->
22 <template id="home">
23 <div>
24 <h3 class="a">Home page</h3>
25 <p>{{content}}</p>
26 </div>
27 </template>
28 <!-- 模闆替換的内容2 -->
29 <template id="about">
30 <div>
31 <h3 class="a">About page</h3>
32 <p>{{content}}</p>
33 </div>
34 </template>
35
36 <script>
37 var Home = Vue.extend({
38 template: \'#home\',
39 data: function() {
40 return {
41 content: \'this is home page!\'
42 }
43 }
44 });
45 var About = Vue.extend({
46 template: \'#about\',
47 data: function() {
48 return {
49 content: \'this is about page!\'
50 }
51 }
52 });
53 // 建立路由
54 var router = new VueRouter();
55 // 構造路由映射關系
56 router.map({
57 \'/home\': { // 這裡和 a連結裡的位址屬性對應
58 component: Home,
59 },
60 \'/about\': { // 這裡和 a連結的位址屬性對應
61 component: About,
62 }
63 });
64 // 路由重定向，當路由為\'/\'時，自動映射到\'/home\'頁面
65 router.redirect({
66 \'/\': \'/home\', // 當連結僞‘/’時，把它重定向為到 ‘/home’的連結
67 });
68 var app = Vue.extend({});
69 // 開啟路由功能
70 router.start(app, "#app");
71 </script>
72 </body>
73 </html> 
2. 在路由上加入bootstrap 排版
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 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
8 <script src="../js/vue.js"></script>
9 <script src="../js/vue-router.js"></script>
10 <title>Document</title>
11 </head>
12 <body>
13 <div class="container" id="app">
14 <div class="row">
15 <div class="well well-lg">第一個路由應用</div>
16 <div class="col-md-3">
17 <ul class="nav nav-pills nav-stacked">
18 <li>
19 <a href="" v-link="{path:\'/home\'}">home</a>
20 </li>
21 <li>
22 <a href="" v-link="{path:\'/about\'}">about</a>
23 </li>
24 </ul>
25 </div>
26 <div class="col-md-9">
27 <router-view></router-view>
28 </div>
29 </div>
30 </div>
31 <template id="home">
32 <div>
33 <h3>homepage</h3>
34 <p>{{content}}</p>
35 </div>
36 </template>
37 <template id="about">
38 <div>
39 <h3>aboutpage</h3>
40 <p>{{content}}</p>
41 </div>
42 </template>
43 <script>
44 var Home = Vue.extend({
45 template: \'#home\',
46 data: function() {
47 return {
48 content: "huanying2015,這裡是首頁内容"
49 }
50 }
51 });
52 var About = Vue.extend({
53 template: \'#about\',
54 data: function() {
55 return {
56 content: "huanying2015,這裡是相關内容，就是其他相關内容"
57 }
58 }
59 });
60 var router = new VueRouter();
61 router.map({
62 \'/home\': {
63 component: Home,
64 },
65 \'/about\': {
66 component: About,
67 }
68 });
69 router.redirect({
70 \'/\': \'/home\'
71 });
72 var App = Vue.extend({});
73 router.start(App, "#app");
74 </script>
75 </body>
76 </html> 
3. 模闆嵌套：
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 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
8 <script src="../js/vue.js"></script>
9 <script src="../js/vue-router.js"></script>
10 <title>Document</title>
11 </head>
12 <body>
13 <div class="container" id="app">
14 <div class="row">
15 <div class="well well-lg">第一個路由應用</div>
16 <div class="col-md-3">
17 <ul class="nav nav-pills nav-stacked">
18 <li><a href="" v-link="{path:\'/home\'}">首頁</a></li>
19 <li>
20 <a href="" v-link="{path:\'/about\'}">關于我們</a>
21 </li>
22 </ul>
23 </div>
24 </div>
25 <div class="col-md-9">
26 <router-view></router-view>
27 </div>
28 </div>
29 <template id="home">
30 <div>
31 <h3>首頁</h3>
32 <p>{{content}}</p>
33 </div>
34 <div>
35 <ul class="nav nav-tabs">
36 <li>
37 <a href="" v-link="{path:\'/home/news\'}">新聞</a>
38 </li>
39 <li>
40 <a href="" v-link="{path:\'/home/video\'}">視訊</a>
41 </li>
42 </ul>
43 </div>
44 <router-view></router-view>
45 </template>
46 <template id="about">
47 <div>
48 <h3>關于我們</h3>
49 <p >{{content}}</p>
50 </div>
51 </template>
52 <template id="news">
53 <div>
54 <li>倒計時1天｜CCTC 2017最全參會指南</li>
55 <li>200分鐘QA交流，14個網際網路應用架構和大資料技術案例在等你</li>
56 <li>自己動手擴充分布式調用鍊</li>
57 <li>分布式系統下的糾删碼技術之Erasure Code</li>
58 </div>
59 </template>
60 <template id="video">
61 <div>
62 <li>Microsoft釋出.NET架構指南草案</li>
63 <li>詳解Android中的SQLite資料庫存儲</li>
64 <li>攜程實時使用者行為系統實踐</li>
65 <li>帶着問題學 Machine Learning：什麼是機器學</li>
66 </div>
67 </template>
68 <script>
69 var Home = Vue.extend({
70 template: \'#home\',
71 data: function() {
72 return {
73 content: "huanying2015,這裡是首頁"
74 }
75 }
76 });
77 var About = Vue.extend({
78 template: \'#about\',
79 data: function() {
80 return {
81 content: "huanying2015,這裡是關于我們的内容"
82 }
83 }
84 });
85 var News = Vue.extend({
86 template: "#news",
87 });
88 var Video = Vue.extend({
89 template: "#video"
90 });
91 var router = new VueRouter();
92 router.map({
93 \'/home\': {
94 component: Home,
95 subRoutes: {
96 \'/news\': {
97 component: News,
98 },
99 \'/video\': {
100 component: Video
101 }
102
103 }
104 },
105 \'/about\': {
106 component: About,
107 subRoutes: {
108
109 }
110 }
111 });
112 router.redirect({
113 \'/\': \'/home\',
114 \'/home\': \'/home/news\'
115 });
116 var App = Vue.extend({});
117 router.start(App, "#app");
118 </script>
119 </body>
120 </html> 4. VueRouter 參數應用：
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 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
8 <script src="../js/vue.js"></script>
9 <script src="../js/vue-router.js"></script>
10 <title>Document</title>
11 </head>
12 <body>
13 <div class="container" id="app">
14 <div class="row">
15 <div class="well well-lg">第一個路由應用</div>
16 <div class="col-md-3">
17 <ul class="nav nva-pills nav-stacked">
18 <li>
19 <a href="" v-link="{path:\'/home\'}">首頁</a>
20 </li>
21 <li>
22 <a href="" v-link="{path:\'/about\'}">關于我們</a>
23 </li>
24 </ul>
25 </div>
26 <div class="col-md-9">
27 <router-view></router-view>
28 </div>
29 </div>
30 </div>
31 <template id="home">
32 <div>
33 <h3>首頁</h3>
34 <p >{{content}}</p>
35 </div>
36 <div class="a">
37 <ul class="nav nav-tabs">
38 <li><a href="" v-link="{path:\'/home/news\'}">新聞</a></li>
39 <li><a href="" v-link="{path:\'/home/video\'}">視屏</a></li>
40 </ul>
41 </div>
42 <div>
43 <router-view></router-view>
44 </div>
45 </template>
46 <template id="about">
47 <div>
48 <h3>關于我們</h3>
49 <p>{{content}}</p>
50 </div>
51 </template>
52
53 <template id="news">
54 <ul>
55 <li><a v-link="{path: \'/home/news/detail/01\'}">倒計時1天｜CCTC 2017最全參會指南</a></li>
56 <li><a v-link="{path: \'/home/news/detail/02\'}">200分鐘QA交流，14個網際網路應用架構和大資料技術案例在等你</a></li>
57 <li><a v-link="{path: \'/home/news/detail/03\'}">自己動手擴充分布式調用鍊</a></li>
58 <li><a v-link="{path: \'/home/news/detail/04\'}">分布式系統下的糾删碼技術之Erasure Code</a></li>
59 </ul>
60 <router-view></router-view>
61 </template>
62 <template id="video">
63 <ul>
64 <li>Microsoft釋出.NET架構指南草案</li>
65 <li>詳解Android中的SQLite資料庫存儲</li>
66 <li>攜程實時使用者行為系統實踐</li>
67 <li>帶着問題學 Machine Learning：什麼是機器學</li>
68 </ul>
69 </template>
70 <template id="detail">
71 <div>
72 <p>新聞詳情: {{$route.params.id}}</p>
73 <p>目前路徑：{{$route.path}}</p>
74 <p>目前參數：{{$route.params | json}}</p>
75 <p>路由名稱：{{$route.name}}</p>
76 <p>路由查詢參數：{{$route.query | json}}</p>
77 <p>路由比對項：{{$route.matched | json}}</p>
78 </div>
79 </template>
80 <script>
81 var Home = Vue.extend({
82 template: \'#home\',
83 data: function() {
84 return {
85 content: \'huanying2015,這裡是首頁頁面\'
86 }
87 }
88 });
89 var About = Vue.extend({
90 template: \'#about\',
91 data: function() {
92 return {
93 content: \'huanying2015,這裡是關于相關也的頁面\'
94 }
95 }
96 });
97 var News = Vue.extend({
98 template: "#news"
99 });
100 var Video = Vue.extend({
101 template: "#video"
102 });
103 var Detail = Vue.extend({
104 template: \'#detail\'
105 });
106 var router = new VueRouter();
107 router.map({
108 \'/home\': {
109 name: \'home\',
110 component: Home,
111 subRoutes: {
112 \'/news\': {
113 name: \'news\',
114 component: News,
115 subRoutes: {
116 \'/detail/:id\': {
117 name: \'detail\',
118 component: Detail
119 }
120 }
121 },
122 \'/video\': {
123 component: Video
124 }
125 }
126 },
127 \'/about\': {
128 component: About
129 }
130 });
131 router.redirect({
132 \'/\': \'/home\',
133 \'/home\': \'/home/news\'
134 });
135 var App = Vue.extend({});
136 router.start(App, \'#app\');
137 </script>
138 </body>
139 </html> 5. a連結選中狀态：在a連結裡加入：activeClass:\'active\'
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 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
8 <script src="../js/vue.js"></script>
9 <script src="../js/vue-router.js"></script>
10 <title>Document</title>
11 </head>
12
13 <body>
14 <div id="app" class="container">
15 <div class="row">
16 <div class="well well-lg">第一個路由應用</div>
17 <div class="col-md-3">
18 <ul class="nav nav-pills nav-stacked">
19 <li><a href="#" v-link="{path : \'/home\', activeClass : \'active\'}">首頁</a></li>
20 <li><a href="#" v-link="{path : \'/about\', activeClass : \'active\'}">關于我們</a></li>
21 </ul>
22 </div>
23 <div class="col-md-9">
24 <router-view></router-view>
25 </div>
26 </div>
27 </div>
28 <template id="home">
29 <div>
30 <h3>首頁</h3>
31 <p>{{content}}</p>
32 </div>
33 <div>
34 <ul class="nav nav-tabs">
35 <li><a v-link="{path : \'/home/news\', activeClass : \'active\'}" href="#">新聞</a></li>
36 <li><a v-link="{path : \'/home/video\', activeClass : \'active\'}" href="#">視訊</a></li>
37 </ul>
38 </div>
39 <router-view></router-view>
40 </template>
41 <template id="about">
42 <div>
43 <h3>關于我們</h3>
44 <p>{{content}}</p>
45 </div>
46 </template>
47
48 <template id="news">
49 <ul class="nav nav-pills nav-stacked">
50 <li><a v-link="{path: \'/home/news/detail/01\', activeClass : \'active\'}">倒計時1天｜CCTC 2017最全參會指南</a></li>
51 <li><a v-link="{path: \'/home/news/detail/02\', activeClass : \'active\'}">200分鐘QA交流，14個網際網路應用架構和大資料技術案例在等你</a></li>
52 <li><a v-link="{path: \'/home/news/detail/03\', activeClass : \'active\'}">自己動手擴充分布式調用鍊</a></li>
53 <li><a v-link="{path: \'/home/news/detail/04\', activeClass : \'active\'}">分布式系統下的糾删碼技術之Erasure Code</a></li>
54 </ul>
55 <router-view></router-view>
56 </template>
57
58 <template id="video">
59 <ul>
60 <li>Microsoft釋出.NET架構指南草案</li>
61 <li>詳解Android中的SQLite資料庫存儲</li>
62 <li>攜程實時使用者行為系統實踐</li>
63 <li>帶着問題學 Machine Learning：什麼是機器學</li>
64 </ul>
65 </template>
66 <template id="detail">
67 <div>
68 <p>新聞詳情: {{$route.params.id}}</p>
69 <p>目前路徑：{{$route.path}}</p>
70 <p>目前參數：{{$route.params | json}}</p>
71 <p>路由名稱：{{$route.name}}</p>
72 <p>路由查詢參數：{{$route.query | json}}</p>
73 <p>路由比對項：{{$route.matched | json}}</p>
74 </div>
75 </template>
76 <script>
77 var Home = Vue.extend({
78 template: \'#home\',
79 data: function() {
80 return {
81 content: \'huanying2015,這裡是首頁頁面\'
82 }
83 }
84 });
85 var About = Vue.extend({
86 template: \'#about\',
87 data: function() {
88 return {
89 content: \'huanying2015,這裡是關于相關也的頁面\'
90 }
91 }
92 });
93 var News = Vue.extend({
94 template: "#news"
95 });
96 var Video = Vue.extend({
97 template: "#video"
98 });
99 var Detail = Vue.extend({
100 template: \'#detail\'
101 });
102 var router = new VueRouter();
103 router.map({
104 \'/home\': {
105 name: \'home\',
106 component: Home,
107 subRoutes: {
108 \'/news\': {
109 name: \'news\',
110 component: News,
111 subRoutes: {
112 \'/detail/:id\': {
113 name: \'detail\',
114 component: Detail
115 }
116 }
117 },
118 \'/video\': {
119 component: Video
120 }
121 }
122 },
123 \'/about\': {
124 component: About
125 }
126 });
127 router.redirect({
128 \'/\': \'/home\',
129 \'/home\': \'/home/news\'
130 });
131 var App = Vue.extend({});
132 router.start(App, \'#app\');
133 </script>
134 </body>
135 </html>