Vue基礎篇-路由機制
阿新 • • 發佈：2018-12-12
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> |