Vue 关闭当前页、关闭当前标签tagsView的实现方法

由于项目使用tagsView,关闭当前页面需要通过关闭当前标签来实现

涉及到几个点：

1. 移除 VisitedView 和 CachedView 中的当前项

2. 跳转到最后一次访问的标签

主要思路：比对 路由路径 ( this.$route.path)

两种方式：

一、 在vue页面直接实现

closePage()
      var currentView = this.$store.state.tagsView.visitedViews[0]
      for (currentView of this.$store.state.tagsView.visitedViews) {
        if (currentView.path === this.$route.path) {
          break
        }
      }
      this.$store.dispatch('tagsView/delView', currentView)
        .then(({ visitedViews }) => {
          if (currentView.path === this.$route.path) {
            const latestView = this.$store.state.tagsView.visitedViews.slice(-1)[0]
            if (latestView) {
              this.$router.push(latestView)
            } else {
              // 如果没有其他标签则跳转到首页
              if (currentView.name === '首页') {
                this.$router.replace({ path: '/redirect' + currentView.fullPath })
              } else {
                this.$router.push('/')
              }
            }
          }
        })

二、在js文件中写自定义函数，在vue页面中调用

import router from '@/router/routers'

// 关闭当前页 关联tagView
export function closePage(store, route) {
  var currentView = store.state.tagsView.visitedViews[0]
  for (currentView of store.state.tagsView.visitedViews) {
    if (currentView.path === route.path) {
      break
    }
  }
  store.dispatch('tagsView/delView', currentView)
    .then(({ visitedViews }) => {
      if (currentView.path === route.path) {
        const latestView = store.state.tagsView.visitedViews.slice(-1)[0]
        if (latestView) {
          router.push(latestView)
        } else {
          if (currentView.name === '首页') {
            router.replace({ path: '/redirect' + currentView.fullPath })
          } else {
            router.push('/')
          }
        }
      }
    })
}

到此这篇关于Vue 关闭当前页、关闭当前标签tagsView的文章就介绍到这了,更多相关Vue 关闭当前页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现tagsview多页签导航功能的示例代码

    vue实现tagsview多页签导航功能的示例代码

    目录 前言 一.效果图 二.实现思路 1. 新建 tags-view.js 2. 在Vuex里面引入 tags-view.js 3. 新建 tabsView 组件 4. 新建 ScrollPane 组件 5. 引入 tabsView 组件 6. 使用 keep-alive 组件,进行页签的缓存 总结 前言 基本上后台管理系统都需要有多页签的功能,但是因为一些脚手架项目基本都把这个功能给集成好了,导致在学习或者修改的时候不知道该如何下手.今天这篇文章就来聊一聊,vue-element-admin项

  • vue实现点击当前标签高亮效果【推荐】

    vue实现点击当前标签高亮效果【推荐】

    实现点击按钮使当前按钮高亮,其他按钮复原的效果 实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; bord

  • Vue实现点击导航栏当前标签后变色功能

    本文实例为大家分享了Vue实现点击导航栏当前标签后变色的具体代码,供大家参考,具体内容如下 效果图 实现 这个功能,借助一个切换标识,当与各标签项 index 对应时切换 css. HTML: <template> <div class="nav"> <!-- 点击切换变色导航栏 --> <ul> <li v-for="(item,index) in nav" :class="{ active: ind

  • Vue实现导航栏点击当前标签变色功能

    Vue实现导航栏点击当前标签变色功能

    本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v

  • vue-admin-template模板添加tagsview的实现

    vue-admin-template模板添加tagsview的实现

    目录 一.从vue-element-admin复制文件 二.修改 vue-admin-template\src\layout\components\AppMain.vue 三.修改vue-admin-template\src\layout\components\index.js 四.vue-admin-template\src\layout\index.vue 五.修改 vue-admin-template\src\store\getters.js 六.修改 vue-admin-template

  • JS实现关闭当前页而不弹出提示框的方法

    本文实例讲述了JS实现关闭当前页而不弹出提示框的方法.分享给大家供大家参考,具体如下: 关闭当前页面,并且打开新页面(不提示) function closeWinAndOpen(url) { var sWinName = "LR"+parseInt(Math.random() * 100000000);//利用随机数处理WinName window.open(url,sWinName, 'toolbar=no,location=no,directories=no,status=yes,

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • Vue 关闭当前页、关闭当前标签tagsView的实现方法

    由于项目使用tagsView,关闭当前页面需要通过关闭当前标签来实现 涉及到几个点: 1. 移除 VisitedView 和 CachedView 中的当前项 2. 跳转到最后一次访问的标签 主要思路:比对 路由路径 ( this.$route.path) 两种方式: 一. 在vue页面直接实现 closePage() var currentView = this.$store.state.tagsView.visitedViews[0] for (currentView of this.$st

  • Vue + Elementui实现多标签页共存的方法

    这个主题,早在一年前就已经创建,也写了一些内容,碍于在应用上体验始终不够完美,一直只存着草稿. 经过多个平台实践,多次迭代,一些功能加了又减了,最后还是回归了最精简的版本,已适用于大部分的场景,若有需要,可自行扩展. 关键逻辑 使用 keep-alive 来缓存各标签页 通过 vue-router 的 beforeEach 方法来更新标签信息 通过 vuex 来保存标签信息 通过 vuex 来使关闭页不被缓存 核心代码 定义 vuex 的跨页变量(store/index.js) import V

  • vue中使用h5 video标签实现弹窗播放本地视频的方法

    目录 1.弹窗的打开关闭 2. 本地视频资源路径的引入 3. 视频播放完毕自动关闭弹窗 4. 视频在弹窗中自适应大小 参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入的visible值: // 父组件中引用子组件 <video-modal :visible.sync="showVideoModal"> // 子组件中 <

  • MySQL 关闭子表的外键约束检察方法

    MySQL 关闭子表的外键约束检察方法

    准备: 定义一个教师表.一个学生表:在学生表中引用教师表ID create table teachers(teacherID int not null auto_increment primary key,teacherName varchar(8)); create table students(studentID int not null auto_increment primary key,teacherID int not null,studentName varchar(8), con

  • CentOS 7.0关闭默认防火墙启用iptables防火墙的设置方法

    CentOS在7.0之前貌似都是用的iptables为防火墙的,在7.0以后都是firewall,其实我也不知道为嘛,但是大部分人都是用iptables,so我也用它了. 下面通过本文给大家分享CentOS 7.0关闭默认防火墙启用iptables防火墙的设置方法,具体内容详情如下所示: 操作系统环境:CentOS Linux release 7.0.1406(Core) 64位 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭firew

  • vue实现a标签点击高亮方法

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre

  • vue监听input标签的value值方法

    由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/

  • layer.open关闭父窗口 以及调用父页面的方法

    实例如下: //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val()); //关闭iframe页面 var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(index); //父类方法 function exportData(shownum,splitstr){ //TODO } 以上这篇layer.

随机推荐