首页 > 其他分享> > 简易前端路由-点击菜单切换到对应的信息栏

简易前端路由-点击菜单切换到对应的信息栏

2021-07-31 12:01:11 作者：互联网

<body>
    <div id="app">
        <!-- hash值  就是链接地址 -->
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <!-- 根据动态绑定指定的组件名称 把对应的组件渲染到component标签所在的位置 -->
        <component :is="comName"></component>
    </div>

</body>

</html>

<script>
    // 需要被切换的4个组件
    const zhuye = {
        template: '<h1>主页</h1>'
    }
    const keji = {
        template: '<h1>科技</h1>'
    }
    const caijing = {
        template: '<h1>财经</h1>'
    }
    const yule = {
        template: '<h1>娱乐</h1>'
    }

    const vm = new Vue({
        el: '#app',
        data: {
            comName: 'zhuye' //默认显示主页
        },
        //注册私有组件
        components: {
            zhuye,
            keji,
            caijing,
            yule
        }
    });

    // 监听window的onhashchange事件根据获取到最新的hash值 切换到要显示的组件名称
    window.onhashchange = function() {
        // console.log(location.hash);
        // 通过location.hash 获取到最新的hash值
        switch (location.hash.slice(1)) {
            //获取到最新的a  给comName赋值
            case '/zhuye':
                vm.comName = 'zhuye'
                break
            case '/caijing':
                vm.comName = 'zhuye'
                break
            case '/keji':
                vm.comName = 'keji'
                break
            case '/yule':
                vm.comName = 'yule'
                break
        }
    }
</script>

点击财经显示对应的信息

主要是为了实现功能没有给样式。些微有点丑。。

标签：菜单,zhuye,comName,vm,点击,yule,hash,路由,const
来源： https://blog.csdn.net/weixin_57607714/article/details/119273501