vue3引入路由

在Vue 3中引入Vue Router可以通过以下步骤进行：

1. 安装Vue Router：

npm install vue-router@4

2. 创建一个router.js文件，并设置Vue Router：

// router.js
import { createRouter, createWebHistory } from 'vue-router';
 
// 引入Vue组件
import HomePage from './components/HomePage.vue';
import AboutPage from './components/AboutPage.vue';
 
// 定义路由
const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage },
];
 
// 创建router实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
export default router;

3. 在Vue应用中使用创建的router实例：

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

4. 在Vue组件中使用<router-view>来显示当前路由内容，以及<router-link>来创建导航链接：

<!-- App.vue -->
<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
 
  <router-view></router-view>
</template>
 
<script>
export default {
  name: 'App',
};
</script>

确保你的Vue 3项目中有相应的组件（例如HomePage和AboutPage），并且它们被正确导入到router.js中。这样就设置好了Vue 3项目中的Vue Router，你可以通过定义的路由来导航你的应用了。