掌握 Vue Router：构建动态单页应用的导航利器🫡

路由是什么？

各位读者也可访问官方教程网址 Vue Router

Vue路由（Router）是 Vue.js 官方的路由管理器，用于构建单页面应用程序（SPA）。

Vue路由在SPA中将浏览器的URL和Vue组件进行绑定，当用户浏览不同页面时，通过动态加载Vue组件并更新视图来与用户交互。其不同于传统的从服务器加载全新页面，而是在不刷新页面的情况下动态切换URL使得页面响应更加流畅平滑。

Route（路由）和 Router（路由器）：

Route：定义了用户访问特定的URL时需要使用的vue的组件，其核心部分为path（路径）+ component（组件）。
Router ：管理着整个路由系统（像交警一样），负责监听URL的变化并且将其与Route匹配，从而加载需要的组件。

基本使用

环境搭建

通过npm命令来安装router（前提是搭建好了vue）

bash 复制代码

npm i vue-router

创建路由器实例

第一步

在 src 文件夹内创建一个router文件夹并且在内部创建index.js文件（入口配置文件）

js 复制代码

// 路由配置文件
import { 
    createRouter,  // 创建路由实例
    createWebHashHistory  // 路由模式
} from 'vue-router' // 插件

// 引入对应的路由组件（页面级别组件建议创建一个views文件夹存放）
import XXX from 'XXX'
import XXX from 'XXX'

// 模块化路由配置（自选）

// 全局路由配置
const routes = [
    {},
    {}
]

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(), // 指定路由模式为 history API 模式
    routes
})

// ------------------------ 路由守卫 ------------------------
router.beforeEach((to, from, next) => { // 全局前置守卫
    // 设置页面标题
    document.title = to.meta.title || '默认标题';
    // to 目标路由对象
    // from 离开的路由对象

    // 打印日志，便于调试
    console.log(to, from, '----------');

    // 检查是否需要登录权限
    if (to.meta.requireAuth) {
        // 如果需要登录权限，跳转到登录页面
        next('/login');
    } else {
        // 放行路由切换
        next();
    }
});

// 导出路由实例
export default router

第二步

在 main.js 中应用 Vue-router

js 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 自动导入文件下的index.js文件
import router from './router' // 从 ./router模块中导入 router 路由对象

const app = createApp(App) // vue 根组件

// 通过使用.use(插件)，搭建vue的周边生态（导入插件）
app
    .use(router) // 插上路由（注册插件）
    .mount('#app') // 找到挂载点

第三步

在 routes中配置路由规则

js 复制代码

 routes:[
        {
            path:'/跳转路径',
            component:组件名称
        },
        {
            path:'/跳转路径',
            component:组件名称
        },
    ]

第四步

使用路由

html 复制代码

<router-link to="/转跳路径"></router-link>

用<router-view>显示当前路由对应的组件

html 复制代码

<router-view></router-view>

拓展（补充创建实例中的知识点）

router-link 详解

<router-link> 用于在单页应用（SPA）中实现页面跳转，它允许用户通过点击来导航到应用不同的部分，并且替代了传统的 <a> 标签，避免页面刷新。

当组件未被正确识别或加载，再或者路由配置错误的情况下，<router-link>会被渲染为普通的<div>标签，而非<a>标签。

属性to：指定了目标地址（即用户点击后转跳的路径），可以为字符串或对象（复杂导航），必填。

接收字符串:

html 复制代码

<router-link to="/about">About</router-link>

接收对象:

html 复制代码

<router-link to="{ name: "User", params: { userId: 1 }}">User</router-link>

属性tag ：自定义渲染的标签类型（默认是<a>），同时保留其导航功能。

从 Vue Router 4 开始，官方文档推荐使用自定义插槽内容而非 tag 属性来实现类似效果，因为 tag 属性已被弃用。

html 复制代码

旧版
<router-link to="/about" tag="span">About</router-link>
新版
<router-link to="/about" custom v-slot="{ navigate }"> 
    <span @click="navigate">About</span>
</router-link>

custom 属性：让<router-link>不要再渲染默认的 DOM 结构，并且允许开发者完全自定义内部结构。
v-slot="{ navigate }"：提取navigate方法，用于触发导航操作。
<span>：代替tap="span"功能，并且绑定navigate使点击触发导航。

属性event ：用于指定触发导航的事件，默认为 click。

在 Vue Router 4 中已被移除，可通过自定义事件绑定实现类似功能。

html 复制代码

旧版
<router-link to="/about" event="mouseover">About</router-link>
新版
<router-link to="/about" custom v-slot="{ navigate }"> 
    <span @mouseover="navigate">About</span>
</router-link>

属性replace ：控制导航是否记录历史记录，默认为 false（使用 router.push()）。

在 Vue Router 4 中可通过编程式导航（router.replace()）替代。

html 复制代码

旧版
<router-link to="/about" replace>About</router-link>
新版
<router-link to="/about" custom v-slot="{ navigate }"> 
    <span @click="$router.replace('/about')">About</span>
</router-link>

属性active-class ：当 <router-link> 的目标路由被激活时，自动添加 CSS 类名。

html 复制代码

<router-link to="/about" active-class="my-active-class">About</router-link>

属性exact-active-class ：当 <router-link> 的目标路由完全匹配时，自动添加 CSS 类名。

html 复制代码

<router-link to="/about" exact-active-class="my-exact-active-class">About</router-link>

路由历史记录

路由历史记录决定了当用户导航到不同的页面时，浏览器地址栏的变化以及如何影响浏览器的历史记录栈。Vue-Router 提供了两种主要的模式来实现对URL的控制：Hash 模式 和 History 模式，并且通过历史记录栈来跟踪用户的导航路径。（浏览器的历史记录是一个栈结构）

导航核心概念 = URL + History Navigator，即：URL的变化 + 历史记录的管理

Hash 模式

使用 URL 的 hash（即 # 后面的部分）来模拟一个完整的 URL，以便当 URL 改变时页面不会重新加载。

js 复制代码

import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({ 
    history: createWebHashHistory(),
    routes // 路由配置 
});

History 模式

利用 HTML5 History API（pushState 和 replaceState），允许你改变 URL 而不影响页面刷新。

js 复制代码

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
    history: createWebHistory(),
    routes // 路由配置
});

管理历史记录

router.push(location) ：导航到一个新的位置。这个方法将一条新的记录推入历史堆栈，这意味着用户可以点击"后退"按钮返回到之前的状态。
js 复制代码
```
this.$router.push({ path: '/about' });
```
router.replace(location) ：替换当前的路由而不添加新条目到历史记录堆栈中。也就是说，用户不能通过点击"后退"按钮返回到被替换的路由。
js 复制代码
```
this.$router.replace({ path: '/about' });
```
router.go(n) ：在历史记录堆栈中前进或后退指定的数量。例如，router.go(-1) 相当于点击浏览器的后退按钮一次。
js 复制代码
```
this.$router.go(-1); // 后退一页
this.$router.go(1);  // 前进一页
```