vue实现后台左侧导航不变,右侧变化

代码如下

<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
        }
      ]
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。