javascript 实现Vue.js路由

男娘i 2022-05-06 04:56 190阅读 0赞

javascript 原生实现 Vue.js的路由切换功能，模拟单页应用

上效果图：

![70][]  ![70 1][]

源码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="author" content="helang.love@qq.com">
        <title>原生模拟Vue路由切换</title>
        <style type="text/css">
            .router_box,#router-view{
                max-width: 1000px;
                margin: 50px auto;
                padding: 0 20px;
            }
            .router_box>a{
                padding: 0 10px;
                color: #42b983;
            }
        </style>
    </head>
    <body>
    <div class="router_box">
        <a href="/home" class="router">主页</a>
        <a href="/news" class="router">新闻</a>
        <a href="/team" class="router">团队</a>
        <a href="/about" class="router">关于</a>
    </div>
    <div id="router-view"></div>
    <script type="text/javascript">
        function Vue(parameters) {
            let vue={};
            vue.routes=parameters.routes || [];
            vue.init=function () {
                document.querySelectorAll(".router").forEach((item,index)=>{
                    item.addEventListener("click",function(e){
                        let event = e|| window.event;
                        event.preventDefault();
                        window.location.hash=this.getAttribute("href");
                    },false);
                });
    
    
                window.addEventListener("hashchange",()=>{
                    vue.routerChange();
                });
    
    
                vue.routerChange();
            };
            vue.routerChange=()=>{
                let nowHash=window.location.hash;
                let index=vue.routes.findIndex((item,index)=>{
                    return nowHash==('#'+item.path);
                });
                if(index>=0){
                    document.querySelector("#router-view").innerHTML=vue.routes[index].component;
                }else {
    
                    let defaultIndex=vue.routes.findIndex((item,index)=>{
                        return item.path=='*';
                    });
                    if(defaultIndex>=0){
                        window.location.hash=vue.routes[defaultIndex].redirect;
                    }
    
                }
            };
    
            vue.init();
        }
    
        new Vue({
            routes:[
                { path: '/home', component: '<h1>主页</h1><h4>helang.love@qq.com</h4>' },
                { path: '/news', component: '<h1>新闻</h1><h4>web-7258</h4>' },
                { path: '/team', component: '<h1>团队</h1><h4>WEB前端梦之蓝</h4>' },
                { path: '/about', component: '<h1>关于</h1><h4>关注公众号：web-7258</h4>' },
                { path:'*', redirect:'/home'}
            ]
        });
    </script>
    </body>
    </html>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[70]: https://img-blog.csdn.net/20181012235419261?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220506/f58a1a970f6b4c2da9cd657543d73aa7.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220506/336923228c084b25922ed49eec7a77dd.png