# 實現簡易前端路由
基于URL中的hash實現（點擊菜單的時候改變URL的hash，根據hash的變化控制組件的切換）
> 技術核心，通過監聽window的onhashchange事件，根據獲取的最新hash值，切換要顯示的組件的名稱。
```
<!--被vue實例控制的div區域-->
<div id="app">
<!--切換組件的超鏈接-->
<a href="#/zhuye">主頁</a>
<a href="#/keji">科技</a>
<a href="#/caijing">財經</a>
<a href="#/yule">娛樂</a>
<!--根據:is屬性指定組件名稱，把對應的組件渲染到component標簽所在的位置-->
<!--可以把component標簽當做是[組件占位符]-->
<component :is="current"></component>
</div>
<script>
//定義需要被切換的四個組件
var zhuye = {
template:`<h1>主頁信息</h1>`
}
var keji = {
template:`<h1>科技信息</h1>`
}
var caijing = {
template:`<h1>財經信息</h1>`
}
var yule = {
template:`<h1>娛樂信息</h1>`
}
//vue 實例對象
var vm = new Vue({
el:"#app",
components:{
zhuye,keji,caijing,yule
},
data:{
current:'keji'
}
})
//監聽window的onhashchange事件，根據獲取到的最新的hash值，切換要顯示的組件名稱
window.onhashchange = function(){
//根據location.hash獲取最新的hash值 '#/keji'
console.log(location.hash)
var currentHash = location.hash.slice(1);
switch(currentHash)
case 'zhuye':
vm.current = 'zhuye';
break;
case 'keji':
vm.current = 'keji';
break;
case 'caijing':
vm.current = 'caijing';
break;
case 'yule':
vm.current = yule;
break;
}
</script>
```
