【Vue】Vue-Router（路由）

一、基本概念

1. 路由（Route）：
   • 路由表示一个映射关系，即 URL 路径到组件的映射。在 Vue-Router 中，一个路由对象通常包含两个主要部分：path（路径）和 component（组件）。
2. 路由集合（Routes）：
   • 路由集合是一组路由的集合，通常通过数组形式声明，在 Vue-Router 中被用来定义应用中所有的路由规则。
3. 路由实例（Router）：
   • 路由实例是 Vue-Router 的核心，它负责创建路由映射表并管理路由的跳转。通过 Vue-Router 的构造函数 new VueRouter() 创建路由实例，并传入路由集合（routes）等配置。

二、安装与配置

1、安装 Vue-Router：

• 在 Vue 项目中，首先需要安装 Vue-Router。可以使用 npm 或 yarn 进行安装，例如：npm install vue-router@4（注意：版本号可能会根据 Vue 的版本和个人需求有所不同）。

2、配置路由：

• 创建一个路由配置文件（如 router/index.js），在该文件中导入 Vue 和 Vue-Router，定义路由集合，并创建路由实例。
• 示例代码：

import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
 
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  // 其他路由...  
];  
 
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes  
});  
 
export default router;

3、将路由实例注入到 Vue 应用中：

• 在 Vue 应用的入口文件（如 main.js 或 main.ts）中，导入路由实例，并使用 Vue.use(VueRouter)（Vue 3 中可能需要通过 createApp 的 .use() 方法）来安装 Vue-Router，然后将路由实例传递给 Vue 应用实例

三、路由使用

1、声明式导航：

• 使用 <router-link> 组件来实现声明式导航，它会被渲染成一个 <a> 标签，但具有更好的路由跳转功能。<router-link> 的 to 属性用于指定目标路由的路径或名称。
• 示例代码：

<router-link to="/">首页</router-link>  
<router-link :to="{ name: 'About' }">关于</router-link>

2、编程式导航：

• 使用路由实例的 push、replace 和 go 方法来实现编程式导航。这些方法可以在 Vue 组件的 JavaScript 代码中调用，以实现更复杂的路由跳转逻辑。
• 示例代码：

this.$router.push('/about');  
this.$router.replace({ name: 'Home' });  
this.$router.go(-1); // 后退一页

四、路由守卫

• 路由守卫：
  • Vue-Router 提供了全局守卫、路由独享守卫和组件内守卫等多种守卫方式，用于在路由跳转前后执行特定的逻辑，如权限校验、页面标题设置等。
  • 示例代码（全局前置守卫）：

router.beforeEach((to, from, next) => {  
  // 逻辑处理...  
  next(); // 确保调用 next 方法，否则钩子就不会被解析  
});

五、路由模式

• Hash 模式：
  • 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。该模式默认启用，且不需要服务器配置。
• History 模式：
  • 利用 HTML5 History Interface 来完成 URL 跳转而无需重新加载页面。该模式需要服务器配置，以确保用户直接访问（如通过书签访问）深度链接时，服务器能返回正确的文件（通常是 index.html）。