Vue3+ts+vite路由跳转（点击按钮跳转页面）

按钮示例：

index.vue按钮所在页面代码

<template> 
<el-button class="button button1" type="primary" @click="enterLeft"  >
        <el-icon class="el-icon--left"><ArrowLeft /></el-icon>左页面</el-button>
      <el-button class="button button2" type="primary"  @click="enterRight">
        右页面<el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
</template> 

import { useRouter } from 'vue-router';


const router =useRouter();
//按钮1路由跳转
function enterLeft(){
  router.push({path:'/indexLeft'})
}
//按钮2路由跳转
function enterRight(){
  router.push({path:'/indexRight'})
}

/router/index.ts路由页面代码

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import type {RouteRecordRaw} from "vue-router"
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/index',
    //定义一个路由，当用户访问根路径（'/'）时，将其重定向到 '/index' 路径。
  },
  {
    path:'/indexLeft',
    name: 'indexLeft',

    //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
    component: () => import('@/views/leftIndex/index.vue'),

  },
  {
    path:'/indexRight',
    name: 'indexRight',
    component: () => import('@/views/rightIndex/index.vue'),

  }
 
]
//路由
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes,
})

router.beforeEach((to, from, next) => {
  next();
})
//导出
export default router

rightIndex/index.vue测试页面代码

<template>
  右页面
</template>