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

最新推荐文章于 2023-07-10 11:02:29 发布

爬楼梯的小新

最新推荐文章于 2023-07-10 11:02:29 发布

阅读量208

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_57607714/article/details/119273501

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

<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>

点击财经显示对应的信息

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

爬楼梯的小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易前端路由-点击菜单切换到对应的信息栏

<body> <div id="app">  <a href="#/zhuye">主页</a> <a href="#/keji">科技</a> <a href="#/caijing">财经</a> <a href="#/yule">娱乐</a>.
复制链接

扫一扫

专栏目录