# 实现简易前端路由
基于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>
```
