[javascript] vuejs的elementui配合iframe實現頁面跳轉

一般后台界面都有三大部分 , 頂部導航 , 左側導航,右側的主界面 . 點擊左側和頂部的導航 , 可以在右側的主界面展示不同的界面

大部分后台的界面都是使用的iframe嵌套的形式,基於vue也是可以方便的使用iframe的

 

html部分如下:

主要就是給iframe綁定一個變量 , 給左側導航綁定點擊事件 ,都是vuejs里面的用法

<div id="app">
    <template>
        <el-menu 
            class="hg-header"
            default-active="2"
            mode="horizontal" 
            >
            <el-menu-item index="1" class="mainLogo">海廣傳媒</el-menu-item>
            <el-menu-item index="2">輿情監控</el-menu-item>
            <el-menu-item index="3">媒資庫</el-menu-item>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>yalaya</span>
            </el-header>
        </el-menu>

        <el-container>
            <el-aside width="200px">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                    <el-menu-item index="1" v-on:click="openUrl('index.php?r=media/weibolist', '微博監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">微博監控</span>
                    </el-menu-item>
                    <el-menu-item index="3" v-on:click="openUrl('index.php?r=media/toutiaolist', '頭條監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">頭條監控</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>



            <el-main class="mainMain">
                <iframe id="mainIframe" class="mainIframe"  v-bind:src="iframeUrl" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </template>            
</div>

可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。v-on:click=""綁定點擊事件並且調用一個方法 , v-bind:src 是給屬性綁定變量 , 屬性的必須這么寫
方法都是寫在methods塊里

this.iframeUrl=url+"&time="+new Date().getTime(); 可以防止url沒有變化的時候 , 界面不變化不刷新

 

js部分如下:

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    iframeUrl: "index.php?r=media/weibolist",
                }
            },
            methods: {
                openUrl: function (url,msg) {
                    this.iframeUrl=url+"&time="+new Date().getTime();
                },
            }
        });

    </script>