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

如图显示:
点击自定义会打开自定义的页面,点击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-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>-->

                <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 &copy;黑帽子科技</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)),
                }
            ]
        }
    ]
});

子页面的引入: