vue3路由

// Vue 3 路由示例代码

// 首先安装 vue-router 4.x 版本
// npm install vue-router@next

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: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 挂载应用并使用路由
const app = createApp(App);
app.use(router);
app.mount('#app');

// 解释说明：
// 1. `createRouter` 和 `createWebHistory` 是 Vue Router 4.x 中的新 API。
// 2. `routes` 数组定义了应用中的路由配置，每个路由对象包含路径 (`path`)、名称 (`name`) 和对应的组件 (`component`)。
// 3. `createWebHistory` 创建了一个基于 HTML5 History API 的路由模式，使得 URL 更加友好。
// 4. 最后，通过 `app.use(router)` 将路由挂载到 Vue 应用中，并通过 `app.mount('#app')` 挂载整个应用。