“Navtification导航菜单”级联“Tabs标签页”路由跳转

浅浅的花香味﹌ 2021-07-25 20:48 422阅读 0赞

## 配置安装element ##

[https://element.eleme.cn/2.13/\#/zh-CN/component/installation][https_element.eleme.cn_2.13_zh-CN_component_installation]

## 代码编写 ##

**1. Navtification导航菜单**

<template>
      <div id="app">
        <div id="title">
          <el-menu theme="dark" 
            :default-active="activeIndex" 
            class="el-menu-demo" 
            mode="horizontal" 
            @select="handleSelect"
            background-color="rgb(133, 18, 24)"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template class="template-item" slot="title">我的工作台</template>
              <el-menu-item index="2-1" @click="pro(value=0)">用户管理</el-menu-item>
              <el-menu-item index="2-2" @click="pro1(value=1)">配置管理</el-menu-item>
              <el-menu-item index="2-3" @click="pro2(value=2)">角色管理</el-menu-item>
              <el-menu-item index="2-4" @click="pro3(value=3)">定时任务补偿</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="body">
          <router-view/>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
          return {
            activeIndex: '1',
            activeIndex2: '1'
          };
        },
        methods: {
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
          },
          //用户管理
           pro(value){
            this.$router.push({path:'/',query:{value}})
          },
          //配置管理
          pro1(value){
            this.$router.push({path:'/',query:{value}})
          },
          //角色管理
          pro2(value){
            this.$router.push({path:'/',query:{value}})
          },
          //定时任务补偿
          pro3(value){
            this.$router.push({path:'/',query:{value}})
          },
        }
    }
    </script>
    
    <style>
      *{
        padding:0;
        margin:0;
      }
      html,body{
        width: 100%!important;
        height: 100%!important;
      }
      #app{
        width: 100%;
        height: 100%;
      }
      #title{
        width: 100%;
        height: 6%;
      }
      .body{
        width: 100%;
        height: 94%;
      }
    </style>

为每一个二级菜单设置不同的路由跳转方法，传入唯一value  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]  
path：路由地址  
query：唯一value

**2. Tabs标签页**

<template>
        <div class="content">
            <el-tabs class="tabs" :tab-position="tabPosition" :value="this.value">
                <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
            </el-tabs>
        </div>
    </template>
    
    <script>
    export default {
        name:"Home",
        data() {
          return {
            tabPosition: 'left',
            value:''
          };
        },
        watch:{
            '$route'(to,from){
                this.value=to.query.value.toString();
            }
        }
    }
    </script>
    
    <style scoped>
    	.content{
    	    width: 100%;
    	    height: 100%;
    	}
    	.tabs{
    	    width: 100%;
    	    height: 60%;
    	}
    </style>

1). watch计算方法：将路由跳转带入的value值存入data中![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]  
2). Tabs 标签页：绑定data中的value  
![在这里插入图片描述][20191230113442509.png]

[https_element.eleme.cn_2.13_zh-CN_component_installation]: https://element.eleme.cn/2.13/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191230113148529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20210725/68ef8e003f5144609c876756c888454a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]: /images/20210725/5419ea3a3bff4a9cbfb1577bef6a2ebf.png
[20191230113442509.png]: /images/20210725/7f8f7b447e03449d9a103ff482b705c8.png