Vue3--Vue-Router的使用

Vue3–Vue-Router的使用

---

---

前言

使用Vue.js框架构建单页应用往往需要页面的跳转，如何在单页面中显示不同组件呢？那就是使用Vue Router。这篇文章将介绍Vue Router的入门使用。

---

一、Vue Router是什么？

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

二、使用步骤

1.安装Vue Router

直接下载 / CDN

https://unpkg.com/vue-router@4

npm

npm install vue-router@4

yarn

yarn add vue-router@4

2.配置

JavaScript

2.1 新建router.js

<!-- 导入vue-router -->
import {
    createRouter, createWebHistory } from 'vue-router'
<!-- 创建Router -->
const router = createRouter({
   
    history: createWebHistory(import.meta.env