靜如處子，動如脫兔！！！
阿新 • • 發佈：2018-12-21
1.模式原理
不向伺服器發請求而是找到匹配元件或物件，並將其渲染。即為“前端路由”準則。vue實現路由需引入vue-router，其使用的有兩種模式，即：hash模式&history模式，下邊來簡單介紹一下。
（1）hash模式
概念：hash是指url尾巴後的 # 及後面的字元，a標籤的錨點定位頁面就是這種模式。
原理：onhashchange事件。
注意：1.hash的地址會保留在瀏覽記錄裡；2.位址列直接修改 # 後的欄位即可實現路由了。
監聽：
window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); var hash = location.hash.slice(1); document.getElementById("div001").style.color = hash; }
（2）history模式
概念：HTML5中有關history的API完善了前端路由。
原理：history的API----pushState,replaceState。
注意：1.前進，後退功能更完善；2.F5重新整理就是終結者，分分鐘出現404；
實現：
pushState,replaceState兩個方法,這兩個方法接收三個引數:stateObj,title,url；通過pushstate把頁面的狀態儲存在state 物件中，當頁面的url再變回這個url時，可以通過event.state取到這個state物件，從而可以對頁面狀態進行還原，這裡的頁面狀態就是頁面字型顏色，其實滾動條的位置，閱讀進度，元件的開關的這些頁面狀態都可以儲存到state的裡面。
history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
console.log(event.state)
if(event.state && event.state.color === 'red'){
document.body.style.color = 'red';
}
}
history.back();
history.forward();2.vue-router路由簡單例項
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項 - 菜鳥教程(runoob.com)</title> <script src="vue.js"></script> <script src="vue-router.min.js"></script> </head> <body> <div id="app"> <p> <router-link to="/page1">page1</router-link> //router-link 元件來導航; <router-link to="/page2">page2</router-link> //`to` 屬性指定連結; <router-link to="/page3">page3</router-link> //預設會被渲染成一個 `<a>` 標籤; </p> <router-view></router-view> //路由出口:路由匹配到的元件將渲染在這裡 </div> <script> var Page1= { template: '<div>page1</div>' }; var Page2= { template: '<div>page2</div>' }; var Page3= { template: '<div>page3</div>' }; var routes = [ { path: '/page1', component: Page1}, { path: '/page2', component: Page2}, { path: '/page3', component: Page3}, ]; var router = new VueRouter({ routes //相當於 routes: routes }); var app = new Vue({ router }).$mount('#app') </script> </body> </html>
<router-link> 的屬性:
| to | 連結目標 | router.push()方法 | <router-link to="/page3">page3</router-link> |
| replace | 導航不留下記錄 | router.replace()方法 | <router-link to="/page3" replace>page3</router-link> |
| append | 路徑新增基路徑 | /a跳到b：/b(未使用);/a/b(使用) | <router-link to="/page3" append>page3</router-link> |
| tag | 渲染成什麼標籤 | - | <router-link to="/page3" tag="li">page3</router-link> |
| active-class | 啟用連結使用的樣式類 | - | <router-link to="/page3" active-class="自定義的樣式類">page3</router-link> |
| exact-active-class | 精確匹配後啟用連結使用的樣式類 | - | - |
| event | 觸發導航的事件 | - | <router-link to="/page3" event="mouseover">page3</router-link> |