实现简易前端路由

最新推荐文章于 2024-08-25 09:57:22 发布

weixin_45723025

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量60

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45723025/article/details/125404385

版权

Vue hashchange 组件切换前端路由动态加载

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        li{
            list-style: none;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box{
            border: 10px solid red;
        }
        .ulli li{
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid blue;
            margin-right: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>
        <component :is="comName"></component>
    </div>
    <script>
        // 主页组件
        const zhuye = {
            template:'<h1>主业信息</h1>'
        }
        const keji = {
            template:'<h1>科技信息</h1>'
        }
        const caijing = {
            template:'<h1>财经信息</h1>'
        }
        const yule = {
            template:'<h1>娱乐信息</h1>'
        }
        var vm = new Vue({
            el:'#app',
            data:{
                comName:'zhuye'
            },
            // 私有组件注册
            components:{
                zhuye,
                keji,
                caijing,
                yule
            }
        })
        // 监听 window的onhashchange事件，根据获取到的最新的hash 值，切换要显示的组件的名称
        window.onhashchange = function(){
            // 通过location.hash 获取到最新的hash值
            console.log(location.hash);
            var con =  location.hash.slice(2)
            console.log(con)
            switch(location.hash.slice(2)){
                case 'zhuye':
                vm.comName = 'zhuye'
                break
                case 'keji':
                vm.comName = 'keji'
                break
                case 'caijing':
                vm.comName = 'caijing'
                break
                case 'yule':
                vm.comName = 'yule'
                break
            }
        }
    </script>
</body>
</html>