在Vue3 ts项目中运用Vue Route的实战教程！

在Vue 3的TypeScript项目中，你可以按照以下步骤使用Vue Router：

1. 安装Vue Router：

bashnpm install vue-router@next

2. 在你的项目中创建一个新的router.ts文件，并在其中定义路由：

typescript// router.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeComponent from '@/components/HomeComponent'
import AboutComponent from '@/components/AboutComponent'

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

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

export default router

3. 在你的主入口文件（例如main.ts）中导入并使用Vue Router：

typescript// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

4. 在你的组件中，使用<router-link>来导航，并使用<router-view>来显示当前路由对应的组件：

vue<!-- MyComponent.vue -->
<template>
  <div>
    <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

5. 在你的Vue应用中，你可以使用this.$router来访问路由器实例，例如：this.$router.push('/about')。你还可以在组件内部使用watch来监听路由变化。

学习资料：点此下载