1. 如何安装 Vue Router4

Vue Router4 可以通过 npm 或者 yarn 这样的包管理器进行安装。以下是安装 Vue Router4 的命令：

# 使用 npm 安装
npm install vue-router@4# 使用 yarn 安装
yarn add vue-router@4

这些命令会将 Vue Router4 安装到你的项目中，并且你可以在你的代码中通过 import 语句来引入它。

2. Vue Router4 的基本配置

Vue Router4 的基本配置主要包括以下几个部分：

• 创建路由器: 你可以通过 createRouter 函数来创建一个路由器对象。这个函数接受一个配置对象作为参数，这个配置对象中最重要的两个属性是 history 和 routes。
• 配置路由: routes 属性是一个数组，数组中的每一个元素都代表一个路由。每一个路由都是一个对象，包含 path 和 component 这两个属性。
• 配置历史模式: history 属性用于配置路由的历史模式。你可以使用 createWebHistory 函数来创建一个 HTML5 历史模式，或者使用 createWebHashHistory 函数来创建一个哈希历史模式。

以下是一个 Vue Router4 的基本配置示例：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'const router = createRouter({history: createWebHistory(),routes: [{ path: '/', component: Home },{ path: '/about', component: About }]
})export default router

在这个示例中，我们首先导入了 createRouter 和 createWebHistory 这两个函数，然后定义了两个路由，分别对应 Home 和 About 这两个组件。最后，我们使用 createRouter 函数创建了一个路由器对象，并导出它。

3. 配置router-view

除了在代码里配置以外,还需要在html或者vue文件里,放置,以确定显示的位置

<template><header><div class="wrapper"><nav class=""><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><RouterView /> <!-- 这里配置RouterView组件-->
</template>

4.在main.js或者main.ts中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router) //使用router插件
app.mount('#app')

​