初步了解Vue Router的配置路由

当使用Vue 3时，你可以使用Vue Router来配置路由。Vue Router是Vue.js官方提供的路由管理器。

下面是一个简单的示例，展示如何在Vue 3中配置路由：

首先，确保你已经安装了Vue Router。你可以通过以下命令使用npm来安装它：

npm install vue-router@next

然后，在你的Vue应用程序中创建一个新的路由文件，比如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;

在上面的代码中，我们首先导入了createRouter和createWebHistory函数，它们是Vue Router的方法之一。然后，我们定义了两个路由，一个是指向Home组件的根路径，另一个是指向About组件的/about路径。最后，我们使用createRouter函数创建了一个新的路由实例，并导出它。

接下来，在你的Vue应用程序的入口文件（通常是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');

在上面的代码中，我们首先导入了createApp函数，然后创建了一个Vue应用程序实例。接下来，我们使用app.use()方法注册了路由实例。最后，我们使用app.mount()方法将应用程序挂载到指定的DOM元素上。

这样，你就完成了Vue 3中配置路由的基本步骤。