基于cdn方式的vue+element-ui的单页面架构

一、下载vue2.x，下载element-ui.js以及css

二、html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/element-ui.css"/>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            body{
                margin:0;
                padding:0;
            }
            .el-container{
                max-width:1200px;
                margin:0 auto;
            }
            .el-menu-item{
                width:25%;
                text-align:center;
                font-size:1.075rem;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <el-container>
              <el-header>
                  <el-menu :default-active="common.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="0">section1</el-menu-item>
                    <el-menu-item index="1">section2</el-menu-item>
                    <el-menu-item index="2">section3</el-menu-item>
                    <el-menu-item index="3">section4</el-menu-item>
                  </el-menu>
              </el-header>
              <el-main>
                  <section v-show="common.activeIndex=='0'">main1</section>
                  <section v-show="common.activeIndex=='1'">main2</section>
                  <section v-show="common.activeIndex=='2'">main3</section>
                  <section v-show="common.activeIndex=='3'">main4</section>
              </el-main>
            </el-container>

        </div>
        
        <script type="text/javascript">
            ;(function(){
                new Vue({
                    el:"#app",
                    data(){
                        return {
                            common:{
                                activeIndex:"0",
                            },
                            main1:{
                                
                            },
                            main2:{
                                
                            },
                            main3:{
                                
                            },
                            main4:{
                                
                            },
                        }
                    },
                    methods:{
                        handleSelect(key, keyPath) {
                            const hash = ["section1","section2","section3","section4"];
                            window.location.hash = hash[parseInt(key)];
                            this.common.activeIndex = key;
                        }
                    },
                    created() {
                        let hash = window.location.hash;
                        const hashArr = ["#section1","#section2","#section3","#section4"];
                        let hashIndex = hashArr.indexOf(hash);
                        this.common.activeIndex = (hashIndex==-1?0:hashIndex).toString();
                    },
                    mounted() {
                        
                    }
                })
            })();
        </script>
    </body>
</html>

 

 

posted @ 2019-12-06 11:19  小小爬虫  阅读(2380)  评论(0)  编辑  收藏  举报