vue路由匹配模式

最新推荐文章于 2025-02-25 15:23:16 发布

奥利给~YY

最新推荐文章于 2025-02-25 15:23:16 发布

阅读量498

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_69507480/article/details/125289174

版权

本文介绍了Vue.js中两种路由匹配模式——HTML5 History模式和Hash模式，详细讲解了它们的语法、对比以及适用场景，帮助理解路由切换的底层机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由匹配模式

路由匹配模式，也称为路由历史记录，主要用于切换底层路由匹配方式的

官方文档：HTML5 History 模式

https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html

① 两种匹配模式语法

Vue-Router提供了两种路由的匹配方式，分别是：hash模式（默认）、history模式

编辑：src/router/index.js，配置匹配模式

...
const router = new VueRouter({
   routes,		// 路由映射规则
   // mode: 'hash',	// 路由匹配模式，默认hash模式
    mode: 'history' // 路由另一种匹配模式，底层history.pushState保障页面不刷新
})
...

② 两种匹配模式对比

`hash`模式	`history`模式
路径中带有`#`符号，如`/#/main`	路径中没有`#`符号，如`/main`

③ 两种匹配模式场景

`hash`模式	`history`模式
一般用于开发中使用	一般用于测试和发布后使用
页面不会重新加载（浏览器特性）	页面不重新加载（代码功能实现）
无需多余配置	需要配置`404路由`
开发中打包测试使用	发布并交付测试运维时打包使用