Vue3中使用Router进行路由配置（图文详情）

Vue3中使用Router进行路由配置

Vue Router 简介

Vue Router 是 Vue.js 官方的路由管理器，它允许您在单页面应用程序（SPA, Single Page Application）中实现导航和页面切换，而无需重新加载整个页面。通过 Vue Router，您可以定义多个路由，每个路由可以映射到不同的组件，并且可以根据 URL 的变化动态地渲染相应的组件。

Vue Router 提供了丰富的功能，包括：

• 声明式路由配置：通过简单的配置对象来定义路由规则。
• 嵌套路由：支持父子路由嵌套，方便构建复杂的页面结构。
• 编程式导航：通过 JavaScript 代码进行页面跳转。
• 路由参数：支持动态路由参数，用于处理 URL 中的变量部分。
• 导航守卫：提供全局、路由独享和组件内的导航守卫，用于控制页面访问权限或执行某些逻辑。
• 路由懒加载：按需加载组件，优化应用性能。
• 滚动行为：控制页面滚动位置，确保用户在导航时有良好的体验。
• 命名视图：在一个页面中同时显示多个组件。
• 重定向和别名：支持路由重定向和别名，方便管理和优化 URL。

本文将不在演示vue3基础工程创建，如果还没有vue3项目工程请参考文章：
Vite创建Vue3工程并引入ElementPlus（图文详细）

安装 Vue Router

官网地址：https://router.vuejs.org/zh/introduction.html

安装依赖

npm install vue-router@4

在src下创建router目录，并创建index.js

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [];
const router = createRouter({
	history: createWebHashHistory(),
	routes
});

export default router;

在main.js下引入router

import router from "./router";
app.use(router);

在src下新建pages文件夹，新建index.vue和about.vue

index.vue

<template>
	<div>index</div>
</template>

<script setup>
	import {} from "vue";
</script>

<style lang="scss" scoped></style>

about.vue

<template>
	<div>about</div>
</template>

<script setup>
	import {} from "vue";
</script>

<style lang="scss" scoped></style>

在router的index.js中加入路由页面

import Index from "@/pages/index.vue";
import About from "@/pages/about.vue";
const routes = [
	{
		path: "/",
		component: Index
	},
	{
		path: "/about",
		component: About
	}
];

在App.vue中加入路由引入

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

<script setup></script>

<style lang="scss" scoped></style>

npm run dev启动运行项目后，打开浏览器查看路由效果

/根路径下

/about路径下