45.实现简易前端路由

• 基于URL中的hash实现(比如点击菜单的时候改变URL的hash, 根据hash的变化控制组件的切换)

核心实现依靠一个事件，即监听hash值变化的事件

// 监听 window 的 onhashchange 事件,根据获取到的最新的 hash值, 切换要显示的组件的名称
window.onhashchange = function(){
    // 通过 location.hash 获取到最新的 hash 值
    console.log(location.hash);
}

案例效果图：

点击每个超链接之后，会进行相应的内容切换，如下：

核心思路： 在页面中有一个vue实例对象，vue实例对象中有四个组件，分别是tab栏切换需要显示的组件内容 在页面中有四个超链接，如下：

<a href="#/zhuye">主页</a> 
<a href="#/keji">科技</a> 
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>

当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件 在触发onhashchange事件的时候，我们根据hash值来让不同的组件进行显示：

window.onhashchange = function() {
    // 通过 location.hash 获取到最新的 hash 值
    console.log(location.hash);
    switch(location.hash.slice(1)){
        case '/zhuye':
        //通过更改数据comName来指定显示的组件
        //因为 <component :is="comName"></component> ，组件已经绑定了comName
        vm.comName = 'zhuye'
        break
        case '/keji':
        vm.comName = 'keji'
        break
        case '/caijing':
        vm.comName = 'caijing'
        break
        case '/yule':
        vm.comName = 'yule'
        break
    }
}