vue3学习笔记之router(router4 + ts)

在Vue 3中，我们可以使用Vue Router 4来管理应用的路由。以下是如何在Vue 3项目中使用Vue Router 4并结合TypeScript的示例：

首先，确保你已经安装了Vue 3和Vue Router 4。如果没有安装，可以使用以下命令安装：

npm install vue@next vue-router@4

然后，你可以在你的项目中创建一个router.ts文件，并设置Vue Router：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
 
// 定义路由
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
 
// 创建router实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
 
export default router;

在main.ts中引入router并使用：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
 
const app = createApp(App);
 
app.use(router);
 
app.mount('#app');

确保你的vue.config.js文件正确配置了TypeScript：

module.exports = {
  // ...
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.json']
    }
  }
};

以上代码展示了如何在Vue 3和TypeScript项目中配置Vue Router 4。这是一个基本的设置，你可以根据自己的需求添加更多的路由配置和功能。