代码如下
<template>
<el-container :style="bodyHeight" ">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu
:default-active="navselected"
:active="navselected"
//一定确保开启路由模式,只有这样下面index的名字才可以被路由路径识别
:router="true">
<el-menu-item index="collection_tmp" >采集模板</el-menu-item>
<el-menu-item index="task_list" >任务列表</el-menu-item>
<el-menu-item index="data_tmp">数据模板</el-menu-item>
</el-menu>
</el-aside>
<el-container class="pad10 flex-c" style="overflow-y: scroll">
/**右侧展示的页面入口**/
<router-view></router-view>
</el-container>
</el-container>
</template>
<script>
export default {
name: "AdminIndex",
data() {
return {
bodyHeight: 0,
userName:"",
navselected:"collection_tmp"
}
},
watch:{
//监听页面路由的切换,将选中的nav动态更新
$route(to,from){
this.navselected=to.path.slice(1);
}
},
created() {
//当前选中页面刷新,标签依然选中当前路由对应的标签
this.navselected=this.$route.path.slice(1);
//动态监听窗口可视高度的变化,动态赋值
let clientHeight = `${document.documentElement.clientHeight}`;
this.bodyHeight = {"height": clientHeight + "px"}
window.onresize = () => {
return (() => {
let clientHeight = `${document.documentElement.clientHeight}`;
this.bodyHeight = {"height": clientHeight + "px"}
})();
};
},
};
</script>
router/index.js路由
{
path: '/Admin',
name: 'Admin',
component:Admin,
children:[
{
path: '/collection_tmp',
name: 'CollectionTmp',
component:CollectionTmp,
},
{
path: '/task_list',
name: 'TaskList',
component:TaskList
},
{
path: '/data_tmp',
name: 'DataTmp',
component:DataTmp
}
]
},