Vue Router 的使用方式主要涉及到安装、配置、以及在 Vue 应用中通过 <router-link> 和 <router-view> 组件来导航和渲染路由对应的组件。以下是 Vue Router 使用方式的详细步骤：
1. 安装 Vue Router
首先，你需要在你的 Vue 项目中安装 Vue Router。这通常通过 npm 或 yarn 来完成。
npm install vue-router@4 # 安装 Vue Router 4.x 版本，适用于 Vue 3
# 或者
yarn add vue-router@4
2. 配置 Vue Router
安装完成后，你需要在项目中配置 Vue Router。这通常涉及到创建一个路由配置文件（如 src/router/index.js 或 src/router/index.ts），并在其中定义路由、创建路由实例，并将其注入到 Vue 应用中。
步骤：
- 导入必要的模块：导入 Vue、VueRouter 以及你的路由组件。
- 定义路由：在路由配置中定义你的路由，每个路由都应该映射到一个组件。
- 创建路由实例：使用 VueRouter.createRouter() 方法创建一个路由实例，并传入路由定义和路由历史记录模式（如 history 模式）。
- 将路由实例注入 Vue 应用：在 Vue 应用的入口文件中（如
main.js或main.ts），通过 Vue.use(VueRouter) 和 app.use(router) 将路由实例注入到 Vue 应用中。
3. 在 Vue 应用中使用 Vue Router
一旦 Vue Router 被安装并配置好，你就可以在 Vue 应用中使用它了。
导航链接
- 使用
<router-link>组件：<router-link>是 Vue Router 提供的一个组件，用于创建导航链接。你可以通过to属性指定链接的目标路由。
<router-link to="/">首页</router-link>
<router-link :to="{ name: 'about' }">关于</router-link>
路由出口
- 使用
<router-view>组件：<router-view>组件是一个功能性组件，用于渲染匹配到的路由组件。你可以将它放在应用的任何地方，但它通常放在 App.vue 的模板中。
<template>
<div id="app">
<router-link to="/">首页</router-link>
<router-view/>
</div>
</template>
4. 编程式导航
除了声明式的 <router-link> 导航，Vue Router 还提供了编程式导航的方法，如 router.push()、router.replace()、router.go() 等，允许你在 JavaScript 代码中控制路由的跳转。
// 使用 this.$router 在 Vue 组件内部
this.$router.push('/about')
// 或者在 Vue Router 实例上
router.push('/about')
5. 路由守卫
Vue Router 还提供了路由守卫的功能，允许你在路由跳转前后执行特定的逻辑，如权限验证、页面跳转前的数据加载等。
- 全局守卫：如
router.beforeEach和router.afterEach，它们会在每个路由跳转前/后执行。 - 路由独享的守卫：在路由配置中直接定义
beforeEnter守卫。 - 组件内的守卫：在组件内部定义
beforeRouteEnter、beforeRouteUpdate（2.2+）、beforeRouteLeave守卫。
总结
Vue Router 的使用方式主要包括安装、配置、以及通过 <router-link> 和 <router-view> 组件在 Vue 应用中导航和渲染路由对应的组件。此外，Vue Router 还提供了编程式导航和路由守卫等高级功能，以满足复杂应用的需求。
