vue 首页打开子页面注意事项

柔情只为你懂 2022-03-10 16:22 647阅读 0赞

如图显示:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]**点击自定义会打开自定义的页面,点击excel导入会打开导入的页面**

**Home.vue**  
在下面 `` 哪里要加上下面的代码,不然配置好路由不会显示

<el-col :span="24">
        <div style="margin-top:10px">
             <router-view></router-view>    
         </div>
     </el-col>

<template>
        <el-container  :style="{height:clientHeight+'px'}">
            
            <el-header style="text-align: right; font-size: 12px;padding: 0px;">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="5" style="width: 200px;text-align:center;border-bottom:1px solid #f5f5f5;">
                        <template slot="title">51TBK商家后台</template>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <el-radio-group v-model="isCollapse" >
                            <el-radio-button :label="false">展开</el-radio-button>
                            <el-radio-button :label="true">收起</el-radio-button>
                        </el-radio-group>
                    </el-menu-item>
    
                   
    
                    <el-menu-item index="3">
                        <a href="https://www.ele.me" target="_blank" style="text-decoration: none;">订单管理</a>
                    </el-menu-item>
                    <el-submenu index="4" style="float:right;">
                        <template slot="title">欢迎回来,{
       {userName}}</template>
                        <el-menu-item index="4-1" @click="loginOut">注销</el-menu-item>
                        <el-menu-item index="4-2">设置</el-menu-item>
                        <el-menu-item index="4-3">个人信息</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-container>
                
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                         :collapse="isCollapse" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">任务</span>
                        </template>
                        <el-menu-item-group>
                            <span slot="title">任务发布</span>
                            <el-menu-item index="1-1" @click="customTask">自定义</el-menu-item>
                            <el-menu-item index="1-2">Excel导入</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group >
                            <span slot="title">任务进度</span>
                            <el-menu-item index="1-3">业务员</el-menu-item>
                            <el-menu-item index="1-4">任务列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">统计报表</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">设置</span>
                    </el-menu-item>
                </el-menu>
                <el-container>
                    
                    <el-main>
                        <el-col :span="24">
                            <div style="margin-top:10px">
                                <router-view></router-view>    
                            </div>
                        </el-col>
                    </el-main>
                    
                    <el-footer>2016 ©黑帽子科技</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </template>
    
    <script>
        export default {
            data() {
                const item = {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                };
                return {
                    tableData: Array(20).fill(item),
                    isCollapse: true,
                    activeIndex: '1',
                    activeIndex2: '1',
                    clientHeight:'',
                    userName: sessionStorage.userName,
                }
    
            },
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleSelect(key, keyPath) {
                    switch(key){
                        case '1-1':
                            this.$router.push('/customTask');
                            break;
                        case '1-2':
                            this.$router.push('/importExcel')
    
                            break;
                        case '1-3': this.$router.push('/Page3')
                            break;
                    }
                },
                changeFixed(clientHeight){ //动态修改样式
                    this.clientHeight = clientHeight;
                },
                goBack(){
                    this.$router.replace({path: '/home'});
                    //replace替换原路由，作用是避免回退死循环
                },
                loginOut(){
                    this.$axios({
                        method:'post',
                        url:'api/user/logout'
                    }).then((res) =>{          //这里使用了ES6的语法
                        if (res.data.status==200){
                            this.open3(res.data.message);
                            this.$emit('userSignIn', ' ');
                            this.$router.replace({path: '/login'});
                        }
                    }).catch((error) =>{
                        this.open6(error.data.message)       //请求失败返回的数据
                    })
    
                },
                open3(msg) {
                    this.$notify({
                        title: '成功',
                        message: msg,
                        type: 'success'
                    });
                },
                open4(msg) {
                    this.$notify({
                        title: '警告',
                        message: msg,
                        type: 'warning'
                    });
                },
                open6(msg) {
                    this.$notify.error({
                        title: '错误',
                        message: msg
                    });
                },
                customTask(){
    
                }
            },
            mounted(){ // 获取浏览器可视区域高度
                this.clientHeight =   `${document.documentElement.clientHeight}`          //document.body.clientWidth;
                //console.log(self.clientHeight);
                window.onresize = function temp() {
                    this.clientHeight = `${document.documentElement.clientHeight}`;
                };
                if (window.history && window.history.pushState) {
                    history.pushState(null, null, document.URL);
                    window.addEventListener('popstate', this.goBack, false);
                }
            },
            destroyed(){
                window.removeEventListener('popstate', this.goBack, false);
            },
    
            watch: { // 如果 `clientHeight` 发生改变，这个函数就会运行
                clientHeight: function () {
                    this.changeFixed(this.clientHeight)
                }
            },
    
        };
    </script>
    
    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }
    
        .el-aside {
            color: #333;
        }
    
    
    
    
    
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
    
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }
    
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
    
        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }
    
        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>

**index.js配置路由:**

主要是在当前的页面配置`children`路由

import Vue from 'vue';
    import VueRouter from 'vue-router';
    Vue.use(VueRouter);
    
    export default new VueRouter({
        saveScrollPosition: true,
        routes: [
            {
                name: 'home',
                path: '/home',
                component: resolve => void(require(['../components/Home.vue'], resolve)),
                meta: {
                    title: '',
                    requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
    
                },
                children:[
                    {
                        path: '/customTask',
                        name: 'customTask',
                        component: resolve => void(require(['../components/customTask.vue'], resolve)),
                    },
                    {
                        path: '/importExcel',
                        name: 'excel',
                        component: resolve => void(require(['../components/ImportExcel.vue'], resolve)),
                    }
                ]
            }
        ]
    });

**子页面的引入:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]: /images/20220310/2cc0d11437af43439678cb171abb2f5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/4bfb86bf46404193a95265416005db45.png