实现简易的前端路由
- 基于URL的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
//监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组建的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
}
模拟路由---切换导航栏：
<!-切换组件的超链接-->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<!-根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置-->
<!-可以把 component 标签当作是【组件的占位符】-->
<component :is="comName"></component>
//定义需要切换的4个组件
const zhuye = {
template:"<h1>主页信息</h1>"
}
const keji = {
template:"<h1>科技信息</h1>"
}
const caijing = {
template:"<h1>财经信息</h1>"
}
const yule = {
template:"<h1>娱乐信息</h1>"
}
//vue实力对象中
data:{
comName:"zhuye"
}
//注册私有组件
components:{
zhuye,
keji,
caijing,
yule
}
监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function(){
//通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
switch(location.hash.slice(1)){ //截取从第一个字符往后的所有字符，也就是去掉#
case'/zhuye':
vm.comName = 'zhuye'
break
case'/keji':
vm.comName = 'keji'
break
case'/caijing':
vm.comName = 'caijing'
break
case'/yule':
vm.comName = 'yule'
break
}}
