有時候，我們在用vue的時候會有這樣的需求，比如一個管理系統，點了左邊的菜單欄，右邊跳轉到一個新的頁面中，而且刷新的時候還會停留在原來打開的頁面。
又或者，一個頁面中幾個不同的畫面來回點擊切換，這兩種情況都可以用vue router路由來解決，本文假設讀者已經了解vue.js的基本知識，例如模板等
我的做法是先跟着代碼敲一遍看到效果，再講解各個原因
1，引入js文件
<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>
2，代碼
<body> <div id="app"> <div> <!-- router-link to屬性就是指向某個具體的鏈接，鏈接的內容會被渲染到router-view標簽中 router-link會被渲染成a標簽，例如第一個會變成<a href="#/first">第一個頁面</a>,前面加了個# --> <router-link to="/first">第1個頁面</router-link> <router-link to="/second">第2個頁面</router-link> <router-link to="/third">第3個頁面</router-link> </div> <router-view></router-view> </div> </body> <script> /* * 申明三個模板 */ var first = { template: '<p>this is first page</p>' }; var second = { template: '<p>this is second page</p>' }; var third = { template: '<p>this is third page</p>' }; /* * 定義路由，component屬性是通過 Vue.extend() 創建的組件構造器，或者，只是一個組件配置對象。 */ var routes = [ { path: '/first', component: first }, { path: '/second', component: second }, { path: '/third', component: third } ]; /* * 創建VueRouter實例 */ var router = new VueRouter({ routes:routes }); /* * 給vue對象綁定路由 * .$mount("#app")手動掛載，用來延遲掛載，跟 * const app = new Vue({ * el:"#app" * router * }); * 效果是一樣的 */ const app = new Vue({ router }).$mount("#app"); </script>
效果圖
這個時候就基本實現了功能，點擊幾個按鈕上面的地址會發生變化，並且router-view里面會被渲染成對應的內容。並且刷新頁面不會跳到首頁
運行步驟：
1，當router-link對應的標簽被點擊時，比如此時點擊第二個，to的值是/second,那么實際的地址就是當前頁面地址+#/second。
2，Vue會找到當前vue實例的路由里的routes里面path為/second的路由。
3，會將找到的這一行記錄的模板component渲染到router-view里面。
redirct重定向
在routes數組里面添加
{ path: '/', redirect: '/first'},
當打開頁面時候，會自動重定向到第一個中.
tag
router-link默認會被渲染成a標簽
我們可以加上tag="li"就會被渲染成li標簽
active-class
router-link標簽被選中時候會默認給選中的元素添加.router-link-active屬性，我們可以通過設置active-class設置被選中后添加的class樣式