vue3安装路由

// 安装 Vue Router 并创建一个简单的路由配置

// 1. 首先，确保你已经安装了 Vue Router。你可以使用 npm 或 yarn 来安装：
// npm install vue-router@next
// 或者
// yarn add vue-router@next

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

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

// 4. 在你的 App.vue 文件中添加 <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>

// 这样就完成了一个简单的 Vue 3 路由配置。