Vue 3路由配置，简单配置

---

一、安装Vue Router

在命令行中运行以下命令，安装Vue Router依赖

npm install vue-router@4

二、新建页面

在你的src目录下，创建一个新的views文件夹，然后在该文件夹中创建几个文件夹，结构如下。该目录下面即为页面。

在每个页面里面随便写些能区分的内容

三、创建路由文件

在你的src目录下，创建一个新的文件夹，例如router，然后在该文件夹中创建一个名为index.js的文件。

在index.js中导入Vue Router，并创建一个新的路由实例

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/login/index.vue'
import Home from '../views/home/index.vue'
import Error from '../views/error-page/index.vue'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/error',
    name: 'Error',
    component: Error
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

四、挂载

在main.js中导入路由并将其挂载到Vue应用程序

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

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

五、添加router-view

在App.vue文件内添加

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>

六、使用

在需要进行路由跳转的地方使用 router.push();方法进行路由跳转

<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(() => {
});

const goHome = () =>{
    router.push('/home');
}
</script>

<template>
    <button @click="goHome">跳转</button>
    <router-view></router-view>
</template>

<style scoped>
</style>

---

总结

现在，你已经成功配置了Vue 3的路由。你可以根据你的需求添加更多的路由和视图组件，以构建一个完整的单页应用程序。你可以在路由配置中定义更多的路径和对应的组件，并在视图组件中编写相应的模板和逻辑。