router vue

// router/vue 示例代码

// 1. 安装 Vue Router
// 首先确保你已经安装了 Vue Router，可以通过 npm 或 yarn 安装：
// npm install vue-router
// 或者
// yarn add vue-router

// 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>
// 在你的 App.vue 或其他组件中，你可以这样使用：

<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>

解释说明：

1. 安装 Vue Router：确保你已经安装了 vue-router，这是 Vue.js 的官方路由管理器。
2. 创建路由配置文件：在 router/index.js 中定义路由规则。每个路由对象包含路径 (path)、名称 (name) 和对应的组件 (component)。
3. 在 main.js 中引入并使用路由：通过 createApp 创建应用实例，并使用 .use(router) 将路由挂载到应用上。
4. 在模板中使用 <router-link> 和 <router-view>：<router-link> 用于创建导航链接，<router-view> 是一个占位符，用于渲染匹配的组件。

以上代码展示了如何在 Vue 3 项目中配置和使用 Vue Router。