Vue3 通过点击按钮实现页面跳转

通过路由跳转的方式实现。

在div定义一个最大化的按钮：

      <el-tooltip :content="tips" placement="top">
        <el-button @click="go">
          <el-icon><full-screen /></el-icon>
        </el-button>
      </el-tooltip>

引入路相关模块：

import { FullScreen } from '@element-plus/icons'
import router from '../../router'
import { useRoute } from 'vue-router'

setup配置：

  setup() {
    const route = useRoute()
    return { route }
  },

计算属性：

  computed: {
    tips() {
      if (this.route.path === '/traffic_full_display') {
        return 'Cancel Full Screen'
      } else {
        return 'Full Screen'
      }
    },
  },

方法：

  methods: {
    go() {
      if (this.route.path === '/traffic_full_display') {
        router.push('/abstract_info')
      } else {
        router.push('/traffic_full_display')
      }
    },
  },