Vue 關閉當前頁、關閉當前標簽tagsView的實現方法

Posted on by

由於項目使用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 關閉當前頁內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：