vue路由

// Vue Router 示例代码

// 1. 安装 Vue Router
// 使用 npm 或 yarn 安装 Vue Router
// npm install vue-router
// 或者
// yarn add vue-router

// 2. 创建路由配置文件 router.js
import { createRouter, createWebHistory } from 'vue-router';
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,
});

export default router;

// 3. 在 main.js 中引入并使用路由
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

// 4. 在组件中使用 <router-link> 和 <router-view>
// 在 App.vue 中：
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

// 解释说明：
// - `createRouter` 和 `createWebHistory` 是 Vue Router 提供的函数，用于创建路由实例和配置历史模式。
// - `routes` 数组定义了应用中的路由规则，每个路由对象包含路径 (`path`)、名称 (`name`) 和对应的组件 (`component`)。
// - `router-link` 是一个导航链接组件，用于在不同页面之间切换。
// - `router-view` 是一个占位符组件，用于渲染当前匹配到的路由组件。