vue 按钮 路由

APP.vue

在已有的按钮上加上路由功能
这里的按钮和布局容器使用了 elementui 的但无关原理，按下按钮即可跳转页面，<router-view></router-view>会捕捉路由并显示

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <el-container>

    <el-aside width="60px">
      <el-row>
        <router-link to="/">
          <el-button type="primary">配置</el-button>
        </router-link>
      </el-row>

      <el-row>
        <router-link to="/about">
          <el-button type="success">图表</el-button>
        </router-link>
      </el-row>
    </el-aside>

    <el-aside width="200px">
      <router-view></router-view>
    </el-aside>

    <el-main>
    </el-main>

  </el-container>
</template>

<style>
html,
body,
#app,
.el-container {
  margin: 0px;
  padding: 0px;
  height: 100%;
  display: flex;
}

.el-main {
  --el-main-padding: 0 !important;
}

.el-row {
  margin-bottom: 10px;
}
</style>

其他

https://router.vuejs.org/zh/guide/