若依项目页面内打开页签

官网：https://www.ruoyi.vip/

RuoYi-Vue2：https://gitee.com/y_project/RuoYi-Vue

RuoYi-Vue3：https://github.com/yangzongzhuan/RuoYi-Vue3

需求

在页面里点击按钮，打开页签，跳转到另一个页面，类似点击左侧菜单栏操作

实现

若依vue2和vue3版本中路由实现和菜单栏点击方法不一样

vue2

备注

使用若依提供的openPage方法不起作用，所以自己修改逻辑实现

思路是：若依的逻辑是点击菜单栏后，将对应的路由信息保存到数组里，并设置当前点击的值

我将菜单栏点击方法放到pinia中，这样页面里点击按钮的时候，就会调用pinia里的方法

1、新加pinia文件--sideBar.js

import { defineStore } from 'pinia'
import {isExternal} from '@/utils/validate.js'

export const useSideBarStore = defineStore({
  id: 'sideBarStore',
  state: () => ({
    tabArray: [
      {
        title: '首页',
        name: 'first',
        component: '@/views/serve.vue',
        affix: true
      }
    ],
    activeTab: 'first'
  }),
  actions: {
    handleItem(item) {
      if (isExternal(item.component)) {
        window.open(item.component, '_blank')
      } else {
        item.showPageWay = '1'
        if (item.showPageWay === '1') {
          // 页签
          let dataa = {
            id: item.id,
            title: item.meta.title,
            name: item.name,
            component: item.component,
            affix: false,
            isRoute: item.isRoute === '1',
            componentModule: item.componentModule
          }

          let isOk = this.tabArray.find(function (val) {
            if (val.name === dataa.name) {
              return true
            }
          })
          if (!isOk) {
            this.tabArray.push(dataa)
            this.activeTab = item.name
          } else {
            this.activeTab = item.name
          }
          // 基础数据
          let ele1 = document.querySelector('#child-content5tab')
          if (ele1) ele1.style.height = '100%'
          setTimeout(() => {
            let ele = document.querySelector('div[data-name=\'micro-app-5tab\']')
            if (ele) ele.style.height = '100%'
          }, 500)
        }
      }
    },
    setActiveTab(val) {
      this.activeTab = val
    },
    setTabArray(val) {
      this.tabArray = val
    }
  }
})

2、views/index.vue，修改菜单栏点击方法

  import { useSideBarStore } from '@/store/modules/sideBar.js'

  const sideBarStore = useSideBarStore()

  const tabArray = computed(() => sideBarStore.tabArray)

  const activeTab = computed(() => sideBarStore.activeTab)

  function handleItem(item) {
    sideBarStore.handleItem(item)
  }

3、views/tabView.vue，修改activeTab和tabArray赋值

  emits('update:activeTab',latestView.name)
  emits('update:tabArray',editableTabs.value)

改成

  import { useSideBarStore } from '@/store/modules/sideBar.js'

  const sideBarStore = useSideBarStore()

  sideBarStore.setActiveTab(latestView.name)
  sideBarStore.setTabArray(editableTabs.value)

4、role/index，新加跳转到user页面的方法

<his-type-button :is-loading="isLoading" type="add" name="添加用户" @click="handleAddUser" />

function handleAddUser() {
    const item = {
      chName: '用户管理',
      component: 'system/user/index',
      hidden: false,
      meta: {
        icon: 'user',
        link: null,
        noCache: false,
        title: '用户管理'
      },
      name: 'User',
      path: 'user',
      showPageWay: '1'
    }
    sideBarStore.handleItem(item)
  }

vue3

RuoYi-vue3版本的路由实现和vue2的不一样，跳转的时候，只需要调用router.push()方法就行