vue3 + ts 路由跳转

在Vue 3 + TypeScript 中，使用 Vue Router 进行路由跳转可以按照以下步骤进行：

1. 安装 Vue Router：使用 npm 或 yarn 安装 Vue Router

npm install vue-router
# 或者
yarn add vue-router

2. 创建路由实例：在你的 `main.ts` 文件中，创建一个路由实例并将其挂载到 Vue 实例上。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

createApp(App).use(router).mount('#app')

3. 在组件中使用路由跳转：在你的组件中使用 `<router-link>` 标签来生成链接，并使用 `$router.push` 方法来导航到其他页面。

<template>
  <div>
    <h1>Hello, World!</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <button @click="goToHome()">Go to Home</button>
    <button @click="goToAbout()">Go to About</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { RouteLocationNormalized, Router } from 'vue-router'

export default defineComponent({
  methods: {
    goToHome() {
      this.$router.push('/') // or this.$router.push({ path: '/' })
    },
    goToAbout() {
      this.$router.push('/about') // or this.$router.push({ path: '/about' })
    }
  },
  // 如果需要在组件中使用路由对象，可以按照以下方式定义组件实例类型
  // 以便在组件中访问路由对象的类型检查和自动补全
  beforeRouteEnter(to: RouteLocationNormalized, from: RouteLocationNormalized, next: (to?: any) => void) {
    next((vm: any) => {
      vm.$router // 路由对象
      vm.$route // 当前路由信息对象
    })
  }
})
</script>

这样就完成了在 Vue 3 + TypeScript 中使用 Vue Router 进行路由跳转的基本步骤。需要注意的是，在使用路由对象时，需要定义组件实例的类型，以便在组件中访问路由对象时进行类型检查和自动补全。