vue3 SFC使用路由

在Vue 3中，单文件组件（SFC）可以与路由一起使用。要在Vue 3中使用路由，你需要安装vue-router库，并在项目中进行配置。

首先，使用以下命令安装vue-router：

npm install vue-router@next

然后，在你的Vue项目中创建一个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;

在这个示例中，我们定义了两个路由：Home和About。每个路由都有一个路径（path）、名称（name）和对应的组件（component）。

接下来，在你的主应用程序文件（通常是main.js）中导入并使用router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

现在，你可以在组件中使用路由了。例如，在Home.vue组件中，你可以添加一个链接到About页面的按钮：

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

当你点击"Go to About"按钮时，它将导航到/about路径，显示About