当前位置：首页 > news >正文

《Vue Router实战教程》12.不同的历史记录模式

news 来源：原创 2025/9/14 6:44:30

欢迎观看《Vue Router 实战（第4版）》视频课程

1. 不同的历史记录模式

在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。

1. 1. Hash 模式

hash 模式是用 createWebHashHistory() 创建的：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({

history: createWebHashHistory(),

routes: [

//...

})

它在内部传递的实际 URL 之前使用了一个井号（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。

1. 1. Memory 模式

Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。它是用 createMemoryHistory() 创建的，并且需要你在调用 app.use(router) 之后手动 push 到初始导航。

import { createRouter, createMemoryHistory } from 'vue-router'

const router = createRouter({

history: createMemoryHistory(),

routes: [

//...

})

虽然不推荐，你仍可以在浏览器应用程序中使用此模式，但请注意它不会有历史记录，这意味着你无法后退或前进。

1. 1. HTML5 模式

用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({

history: createWebHistory(),

routes: [

//...

})

当使用这种历史模式时，URL 会看起来很 "正常"，例如 https://example.com/user/id。漂亮!

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就尴尬了。

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

1. 1. 服务器配置示例

注意：以下示例假定你正在从根目录提供服务。如果你部署到子目录，你应该使用Vue CLI 的 publicPath 配置和相关的路由器的 base 属性。你还需要调整下面的例子，以使用子目录而不是根目录（例如，将RewriteBase/ 替换为 RewriteBase/name-of-your-subfolder/）。

Apache

Options -MultiViews

</IfModule>

RewriteEngine On

RewriteBase /

RewriteRule ^index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.html [L]

</IfModule>

也可以使用 FallbackResource 代替 mod_rewrite。

nginx

location / {

try_files $uri $uri/ /index.html;

}

原生 Node.js

const http = require('http')

const fs = require('fs')

const httpPort = 80

http

.createServer((req, res) => {

fs.readFile('index.html', 'utf-8', (err, content) => {

if (err) {

console.log('We cannot open "index.html" file.')

}

res.writeHead(200, {

'Content-Type': 'text/html; charset=utf-8',

})

res.end(content)

})

.listen(httpPort, () => {

console.log('Server listening on: http://localhost:%s', httpPort)

})

Express + Node.js

对于 Node.js/Express，可以考虑使用 connect-history-api-fallback 中间件。

Internet Information Services (IIS)

安装 IIS UrlRewrite
在网站的根目录下创建一个 web.config 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<system.webServer>

<rules>

</conditions>

</rule>

</rules>

</rewrite>

</system.webServer>

</configuration>

Caddy v2

try_files {path} /

Caddy v1

rewrite {

regexp .*

to {path} /

}

Firebase hosting

将此添加到你的 firebase.json 中：

{

"hosting": {

"public": "dist",

"rewrites": [

{

"source": "**",

"destination": "/index.html"

}

]

}

Netlify

创建一个 _redirects 文件，包含在你的部署文件中：

/* /index.html 200

在 vue-cli、nuxt 和 vite 项目中，这个文件通常放在名为 static 或 public 的目录下。

你可以在 Netlify 文档中找到更多关于语法的信息。你也可以创建一个 netlify.toml 来结合其他 Netlify 功能的重定向。

Vercel

在项目根目录创建一个vercel.json文件，内容如下：

{

"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]

}

1. 1. 附加说明

这有一个注意事项。你的服务器将不再报告 404 错误，因为现在所有未找到的路径都会显示你的 index.html 文件。为了解决这个问题，你应该在你的 Vue 应用程序中实现一个万能的路由来显示 404 页面。

const router = createRouter({

history: createWebHistory(),

routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],

})

另外，如果你使用的是 Node.js 服务器，你可以通过在服务器端使用路由器来匹配传入的 URL，如果没有匹配到路由，则用 404 来响应，从而实现回退。查看 Vue 服务器端渲染文档了解更多信息。

《Vue Router实战教程》12.不同的历史记录模式

欢迎观看《Vue Router 实战（第4版）》视频课程不同的历史记录模式在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。 Hash 模式 hash 模式是用 createWebHashHistory() 创建的： import { createRouter,…...

编程日记 2025/9/14 6:44:30

Dify什么？Dify 零门槛打造专属 AI 应用

Dify 是一个专注于简化大语言模型（LLM）应用开发的开源平台，旨在帮助用户通过可视化界面和模块化工具快速构建、部署和管理 AI 驱动的应用程序。以下是其核心特点： 主要功能可视化编排提供直观的界面，无需深入编码即…...

编程日记 2025/9/11 3:15:33

【Javascript】在canvas中加载shader着色器的方法（开箱即用）

功能简介可以播放，暂停shader代码，可以在js中配置shader参数（下面案例列举了所有可用参数形式）缺点这个是固定机位，没有自定义顶点着色器部分的功能，有需要可直接在class中改，或者修改后调用…...

编程日记 2025/9/14 6:41:45

华为华三模拟器解决兼容问题Win11 24H2 现在使用ENSP的问题解决了

一、Win11 24H2 现在使用ENSP的问题解决了这个Win11 的 24H2不能使用ENSP的问题已经困扰我们很久了，在之前的文章中，我们也有说明这个问题之前ENSP肯定启动会报错40 当时还建议大家先不要更新到win11的24H2版本，现在终于迎来了更新&#…...

编程日记 2025/9/9 0:27:10

五、用例篇

Bug等级：崩溃、严重、一般、次要 bug的生命周期面试高频考题：跟开发产生争执怎么办？ (1)反思自己，是不是bug描述写的不清楚 (2)站在用户思考问题，反问开发人员：“如果你是用户，你能接受这样…...

编程日记 2025/9/8 15:15:58

Mysql中的数据类型和语句概述

Mysql中的数据类型数值类整数：int，四个字节构成浮点型：float单精度浮点数，四个字节，double双精度浮点数，八个字节，decimal用于高精度计算，尤其是在金融领域。decimal&#xff…...

编程日记 2025/9/11 20:53:52

先下载依赖 npx --yes --registry https://registry.npmmirror.com npm install mqtt 在src的api创建 mes.js // 导入axios import axios from axios;// 定义一个变量,记录公共的前缀, baseURL const baseURL http://localhost:8080; const instance axios.create({ base…...

编程日记 2025/9/11 11:18:14

VLC快速制作rtsp流媒体服务器

1.安装vlc media player工具 2.打开后点击菜单媒体->流 3.添加mp4视频，选择串流 4.选择下一个 5.新目标选择 RTSP，点击添加按钮 6.端口和路径随便填写，如果推流失败就换个端口。一路操作下去 7.点击流按钮后，就可以看到下图…...

编程日记 2025/9/8 0:13:52

24FIC

一，赛前准备检材密码：2024Fic杭州Powered~by~HL! 案情简介： 2024年4月，卢某报案至警方，声称自己疑似遭受了“杀猪盘”诈骗，大量钱财被骗走。卢某透露，在与某公司交流过程中结识了员工李某。李某…...

编程日记 2025/9/10 11:10:30

P3367 【模板】并查集

题目链接：点击进入题目思路代码（路径压缩） #include <bits/stdc.h> using namespace std; const int maxn 1e6 10;int n,m,fa[maxn];int find(int x) {if(xfa[x]) return x;else return fa[x]find(fa[x]); }int unions(int x,…...

编程日记 2025/9/8 20:07:47

【leetcode hot 100 300】最长递增子序列

错误解法：在每次更新db[i]时，如果当前nums[i]>nums[i-1]就db[i-1]1，否则db[i-1] class Solution {public int lengthOfLIS(int[] nums) {int n nums.length;int[] db new int[n]; // db[i]表示到i的最长严格递增子序列的长度db[0] 1;f…...

编程日记 2025/9/9 1:31:21

jwt.io学习

jwt.io 是一个专门用于 JSON Web Token（JWT）相关操作和学习的网站，地址是：JSON Web Tokens - jwt.io具有以下主要功能： JWT 解码：能够将 JWT 令牌进行解码，展示出令牌中包含的各个部分&#xf…...

编程日记 2025/9/11 8:29:05

MySQL 优化方案大全

一、数据库设计优化 1. 表结构设计合理选择字段类型： 使用最小满足需求的类型（如TINYINT代替INT）字符串类型优先VARCHAR，固定长度用CHAR 时间类型用TIMESTAMP（4字节）或DATETIME（8字节&#xf…...

编程日记 2025/9/8 1:29:06

题目 2701: 蓝桥杯2022年第十三届决赛真题-取模（C/C++/Java组）

题目 2701: 蓝桥杯2022年第十三届决赛真题-取模（C/C/Java组） 时间限制: 3s 内存限制: 512MB 提交: 6633 解决: 1263 题目描述给定 n, m ，问是否存在两个不同的数 x, y 使得 1 ≤ x < y ≤ m 且 n mod x n mod y 。输入格式输入包含多…...

编程日记 2025/9/4 21:55:07

【LeetCode 题解】算法：36.有效的数独

一、问题剖析在算法领域中，数独问题是一个经典且有趣的逻辑验证题目。本题的核心任务是判断一个给定的 9x9 数独是否有效。判断的依据是数独的基本规则：数字 1-9 在每一行、每一列以及每一个 3x3 的宫内都只能出现一次。同时，题目中明确指出…...

编程日记 2025/9/8 13:32:45

C++学习之MYSQL数据库

目录 1.mysql数据库介绍 2.mysql数据库安装 3.mysql数据库启动和登录 4.mysql数据库CURD 5.mysql数据库表CURD 6.mysql数据库数据CURD 7.mysql基础综合练习 8.mysql数据库总日期和时间函数 9.mysql中函数 10.PLSQL工具使用介绍 11.ORACLE实例别名和ORACLE客户端 12.…...

编程日记 2025/9/13 4:10:37

Node.js 开发的简单 Web 服务器代码

步骤 1：创建项目文件新建名为 app.js 的文件，添加以下代码： // 1. 导入内置 http 模块 const http require(http);// 2. 创建服务器实例 const server http.createServer((req, res) > {// 设置响应头res.writeHead(200, { Content-T…...

编程日记 2025/9/12 4:06:18

Postgresql安装mysql_fdw并映射MySQL数据库

关于Postgresql映射Mysql数据库数据领导：小汪啊，他们的数据库是不是能连接上了。我：对啊，我已经读数据了。领导：那改一下吧，直接把他们的数据映射过来，体现一下我们功能的多样性。我&#…...

编程日记 2025/9/13 1:00:13

flutter 获取通话记录和通讯录

Dart SDK version is 3.7.01 dependencies:flutter:sdk: flutterpermission_handler: ^11.0.1 # 权限管理flutter_contacts: ^1.1.92call_log: ^5.0.5cupertino_icons: ^1.0.8dev_dependencies:flutter_test:sdk: flutterflutter_lints: ^5.0.0 2 contact_and_calls_page.da…...

编程日记 2025/9/13 12:11:54

欢迎观看《Vue Router 实战（第4版）》视频课程

相关文章：