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 ©黑帽子科技</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)),
}
]
}
]
});
子页面的引入:
以上是 vue 首页打开子页面注意事项 的全部内容， 来源链接： utcz.com/z/375652.html
