Vue3项目配置Vue-Router

        在使用 Vue 作为前端开发框架时，我们通常以单页面应用(SPA)的形式进行开发。而单页面应用中，我们通常通过路由跳转的方式来实现我们页面上组件之间的跳转。在本文中，博主将详细介绍在Vue 3 项目中，如何进行 Vue-Router 的安装与配置。

在开始安装和配置 Vue-Router 之前，我们需要先创建一个 Vue3 的项目，如果还未创建Vue3的项目，请参考Vite 创建 Vue3 + TS 项目

1.安装Vue-Router

         在项目根路径下(与src目录同级),运行命令行：

# 安装 vue-router

# 使用 npm 包管理器
npm install vue-router

# 使用 yarn 包管理器
yarn add vue-router

# 使用 pnpm 包管理器
pnpm install vue-router

 2.创建路由配置文件

        2.1.新建路由跳转组件

        在src/views/目录下，新建两个 Vue 组件(博主这里新建了home和login组件)：

<!-- Login 组件 -->

<template>
    <div>
        <h1>This is a Login Page.</h1>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

<!-- Home 组件 -->

<template>
    <div>
        <h1>This is a Home Page.</h1>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

 2.2.新建路由配置文件

        在src目录下，新建router文件夹，用来存放我们的路由配置文件：

         在路由配置文件中添加以下代码：

/* 路由配置文件 index.ts */

import { createWebHistory, createRouter } from 'vue-router'

// 定义路由配置
const routes = [
    {
        path: '/',
        name: 'Login',
        component: () => import('/@/views/login/index.vue')
    },
    {
        path: '/home',
        name: 'Home',
        component: () => import('/@/views/home/index.vue')
    }
]

// 创建路由实例
const router = createRouter({
    history: createWebHistory(),    // 导航历史记录模式
    routes
})


// 导出实例
export default router

这里博之前已经配置好了项目根路径的别名，请参考Vite +Vue3 + TS 项目根路径别名配置

        2.3.注册路由器插件

        在 main.ts 文件中，引入我们刚才编辑好的路由配置文件：

/* main.ts 文件 */

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

const app = createApp(App)

app.use(pinia)
// 挂载 路由器
app.use(router)
app.mount('#app')

        2.4.在容器中添加路由器组件占位符

<!-- App.vue 入口文件 -->

<script setup lang="ts">
</script>

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

<style scoped>

</style>

3.路由配置验证

        项目根路径下，运行命令行：

# 启动项目
npm run dev

        这里博主已经完成了项目环境变量的配置，所以在项目运行后会自动打开浏览器。关于Vue项目环境变量配置，请参考Vite + Vue3项目配置环境变量

        打开浏览器后，我们可以看到首页默认的是我们的 Login 组件：

        然后，我们在浏览器地址栏将路由地址改为/home： 

# 修改路由跳转地址
http://localhost:8080/home

        由此可见，路由器配置成功！！！