vue router

// Vue Router 示例代码

// 1. 安装 Vue Router
// npm install vue-router@next --save

// 2. 创建 router/index.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'

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

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

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

// 解释说明：
// - `createRouter` 和 `createWebHistory` 是 Vue Router 提供的函数，用于创建路由实例和配置历史模式。
// - `routes` 数组定义了应用中的所有路由，每个路由对象包含路径 (`path`)、名称 (`name`) 和对应的组件 (`component`)。
// - `router-link` 是一个导航链接组件，`to` 属性指定要导航的目标路径。
// - `router-view` 是一个占位符组件，用于渲染匹配到的组件。