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

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