element tab标签管理路由页面的项目实践

目录
  • 样式
  • 准备
  • 思路
  • 搭建
    • 搭建页面框架
    • 准备状态管理
    • 监听路由变化
    • tab方法
    • 登录 与 退出登录

样式

准备

  • 搭建好的vue脚手架(elementui,router,vuex)
  • elementui(NavMenu 导航菜单,Tabs 标签页)

思路

  • 将打开的所有路由放到一个栈里(openTab:[]),tabs显示遍历openTab
  • 初始状态,将首页推入栈,并设置激活状态
  • 当切换路由时(监听路由变化),判断栈里是否存在这个路由,若存在,只改变激活状态;若不存在,则推入栈,并改变激活状态。
  • tabs 切换,调用@tab-click='tabClick’方法,跳转路由,(路由变化,走上一步中“若存在,只改变激活状态”)
  • tabs 移除,调用@tab-remove=‘tabRemove’ 方法,移除栈(openTab)中对应的路由,若移除的路由是激活状态,那么跳转路由到栈中最后一个(路由变化);若移除的路由非激活状态,不做修改

涉及到的内容

vuex state:路由栈、激活状态 mutations: 添加、移除、修改激活状态
watch
mounted
tab 切换、移除两个方法

搭建

搭建页面框架

slider组件

<template>
      <el-menu
        :default-active="$route.path"
        class="slider"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        >
        <el-menu-item index="/main" >
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu v-for="(item,index) in menuList" :key="index" :index='item.id'>
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item v-for="child in item.children" :key="child.id" :index='child.index'>{{child.childtitle}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
</template>

<script>
export default {
  name: 'Slider',
  data(){
    return {
      menuList:[
        {
          id:'1',
          title: '导航1',
          icon:'el-icon-location',
          children:[
            {
              index:'/page1',
              childtitle:'导航1page1'
            },
            {
              index:'/page2',
              childtitle:'导航1page2'
            },
          ]
        },
        {
          id:'2',
          title: '导航2',
          icon:'el-icon-location',
          children:[
            {
              index:'/page3',
              childtitle:'导航2page3'
            },
            {
              index:'/page4',
              childtitle:'导航2page4'
            },
          ]
        }
      ]
    }
  },

}
</script>
<style scoped>
.slider{
  height: 100vh;
}
</style>

home页

<template>
  <div class="home">
    <el-row>
      <el-col :span="4">
        <!-- 左侧导航栏 -->
        <slider></slider>
      </el-col>
      <el-col :span='20'>
        <!-- header -->
        <nav-top></nav-top>
        <!-- 内容区 -->
        <div class="app-wrap">
           <!-- 此处放置el-tabs代码 -->
            <div >
              <el-tabs
                v-model="activeIndex"
                type="border-card"
                closable
                v-if="openTab.length"
                 @tab-click='tabClick'
                  @tab-remove='tabRemove'
                >
                <el-tab-pane
                  :key="item.name"
                  v-for="(item, index) in openTab"
                  :label="item.name"
                  :name="item.route"
                 >
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="content-wrap">
              <router-view/>
            </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

通过路由配置,使页面可以正常的跳转

准备状态管理

state: {
    openTab:[],//所有打开的路由
    activeIndex:'/main' //激活状态
  },
  mutations: {
    // 添加tabs
    add_tabs (state, data) {
      this.state.openTab.push(data);
    },
    // 删除tabs
    delete_tabs (state, route) {
      let index = 0;
      for (let option of state.openTab) {
        if (option.route === route) {
          break;
        }
        index++;
      }
      this.state.openTab.splice(index, 1);
    },
    // 设置当前激活的tab
    set_active_index (state, index) {
      this.state.activeIndex = index;
    },
  },

在home页 ,或者silder页 , 初始的路由状态

mounted () {
    // 刷新时以当前路由做为tab加入tabs
    // 当前路由不是首页时,添加首页以及另一页到store里,并设置激活状态
    // 当当前路由是首页时,添加首页到store,并设置激活状态
   if (this.$route.path !== '/' && this.$route.path !== '/main') {
      console.log('1');
      this.$store.commit('add_tabs', {route: '/main' , name: 'main'});
      this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
      this.$store.commit('set_active_index', this.$route.path);
    } else {
      console.log('2');
      this.$store.commit('add_tabs', {route: '/main', name: 'main'});
      this.$store.commit('set_active_index', '/main');
      this.$router.push('/');
    }
  },

注意这里 如果你刷新 只想保留首页,那么 mounted 中 ,你只需写else中的代码。
如果刷新想,保留首页和当前路由页,if else都要写()

监听路由变化

 watch:{
    '$route'(to,from){
        //判断路由是否已经打开
        //已经打开的 ,将其置为active
        //未打开的,将其放入队列里
        let flag = false;
        for(let item of this.openTab){
          console.log("item.name",item.name)
          console.log("t0.name",to.name)

          if(item.name === to.name){
            console.log('to.path',to.path);
            this.$store.commit('set_active_index',to.path)
            flag = true;
            break;
          }
        }

        if(!flag){
          console.log('to.path',to.path);
          this.$store.commit('add_tabs', {route: to.path, name: to.name});
          this.$store.commit('set_active_index', to.path);
        }

    }
  }

tab方法

//tab标签点击时,切换相应的路由
    tabClick(tab){
      console.log("tab",tab);
      console.log('active',this.activeIndex);
      this.$router.push({path: this.activeIndex});
    },
    //移除tab标签
    tabRemove(targetName){
      console.log("tabRemove",targetName);
      //首页不删
      if(targetName == '/'){
        return
      }
      this.$store.commit('delete_tabs', targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.openTab && this.openTab.length >= 1) {
          console.log('=============',this.openTab[this.openTab.length-1].route)
          this.$store.commit('set_active_index', this.openTab[this.openTab.length-1].route);
          this.$router.push({path: this.activeIndex});
        } else {
          this.$router.push({path: '/'});
        }
      }
    }

GitHub代码地址
在线演示地址

登录 与 退出登录

做登录与退出时 ,需要清空路由

退出登录方法 或者 登录成功方法 调用

this.$store.state.openTab = [];
this.$store.state.activeIndex = '/main';

到此这篇关于element tab标签管理路由页面的项目实践的文章就介绍到这了,更多相关element tab标签管理路由页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • element中Steps步骤条和Tabs标签页关联的解决

    步骤条和标签页的简单关联 1.步骤条: 步骤条的acitve属性用来设置当前激活的步骤,类型为number <el-steps :active="active - 0" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-st

  • Element框架el-tab点击标签页时再渲染问题的解决

    之前一直以为这种标签页加载时要么同时渲染,加载所有页面:要么通过el-tab的@tab-click事件,通过判断tab.name选择加载.但是后者有两个弊端:(1)页面仍然一下子渲染,向后台请求许多接口,造成页面加载缓慢,无法实现实时渲染的效果(2)不能解决父子组件数据传递的问题) 1. 父子组件数据传递问题: <!--父组件--> <el-tabs v-model="activeName" @tab-click="handleClick">

  • 使用ElementUI修改el-tabs标签页组件样式

    目录 ElementUI修改el-tabs标签页组件样式 效果图 ElementUI的el-tabs标签页样式冲突问题 修改样式即可 ElementUI修改el-tabs标签页组件样式 官方示例:https://element.eleme.cn/#/zh-CN/component/tabs 效果图 <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="false"

  • element tab标签管理路由页面的项目实践

    目录 样式 准备 思路 搭建 搭建页面框架 准备状态管理 监听路由变化 tab方法 登录 与 退出登录 样式 准备 搭建好的vue脚手架(elementui,router,vuex) elementui(NavMenu 导航菜单,Tabs 标签页) 思路 将打开的所有路由放到一个栈里(openTab:[]),tabs显示遍历openTab 初始状态,将首页推入栈,并设置激活状态 当切换路由时(监听路由变化),判断栈里是否存在这个路由,若存在,只改变激活状态:若不存在,则推入栈,并改变激活状态.

  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上

  • vue如何点击多个tab标签打开关闭多个页面

    目录 点击多个tab标签打开关闭多个页面 需求 效果图 说一下思路 vue tab页多页面切换 点击多个tab标签打开关闭多个页面 需求 现将页面分为Header LeftSideBar Main三大模块 左侧LeftSideBar为menu菜单,点击菜单每一项,在Main中出现上部为tag标签,下部为内容 可打开多个tag标签 ,可内容切换 ,可关闭 效果图 1.router.js中(在LeftSideBar组件中现在有两个菜单项icons和tabs) { path:'/addtab', re

  • Vue.js项目中管理每个页面的头部标签的两种方法

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法. 使用router.meta 在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, {

  • Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

    类似于浏览器窗口一样的路由切换逻辑,看着还是挺高大上的,本以为有很多高级的玩意儿,奈何复杂的东西总是由简单的东西拼接而成的,这个功能也不例外. 本篇文章主要描述两个问题: 如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画. 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下: Tab标签页实现 首先是该组件的模板部分, ContextMenu 组件是我们自定义的右键菜单,后面会说到. a-tabs 组件则是 ant 的组件,具体

  • vuex + keep-alive实现tab标签页面缓存功能

    在开发很多管理系统过程之中,常遇到这种需求,需要对打开路由页面进行缓存,然后在系统页眉提供方便查阅的tab标签进行切换以及对已经缓存页面进行数据刷新和清除数据操作.具体演示如下图所示: 在上面演示中实现了类似 window tab 标签页效果,会对当前数据进行缓存.在浏览器中实现对路由页面的缓存可以减少接口请求,也方便了用户来回切换想搜索的数据列表. 原理 Vue 提供的 keep-alive API实现对路由组件的缓存. include 属性可以绑定一个数组,里面是需要路由组件的 name 值

  • vue自定义标签和单页面多路由的实现代码

    1. 自定义组件标签(如在主页插入顶栏/侧边栏等)   比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue: import vHead from "./Header.vue"; #导入Header.vue为vHead,注意路径, Header.vue和Home.vue 在同一路径下用./ 然后导出组件: export default { components: { vHead, } };

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

  • Android应用中使用ViewPager和ViewPager指示器来制作Tab标签

    一.ViewPageIndicator开源框架的基本用法 我们先得去Github上面下载这个库,下载地址:https://github.com/JakeWharton/Android-ViewPagerIndicator,下载下来之后你可以运行例子,来看看我们需要什么样的效果,然后在此基础上改成我们自己想要的效果 1.如何使用开源框架 第1步:improt library项目 第2步:导入library进我们自己新建的项目 从Github上Download下来这个zip包之后,里面会有一个lib

  • 深入理解与使用keep-alive(配合router-view缓存整个路由页面)

    在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行'持久化',此时 <keep-alive> 便可以派上用场了. <keep-alive> 可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中.在下一次显示时,也不会重现渲染. PS:<keep-alive> 与 <transition>相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$p

随机推荐