createWebHistory和createWebHashHistory的区别

已于 2023-04-04 17:28:18 修改
阅读量476 收藏 1
点赞数
分类专栏： 前端笔记 文章标签： 前端
于 2023-03-24 10:46:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56885551/article/details/129745037
版权
当使用createWebHistory路由时不带#，刷新页面可能出现404错误，需要配置nginx进行URL重定向。而createWebHashHistory模式下，刷新会向服务器发起请求，需与后端配合处理。若无特殊需求，可直接采用hash模式进行开发。
摘要由CSDN通过智能技术生成

createWebHistory路由不带#

http://localhost:3001/home

history刷新会出现404需要配nginx的url重定向

createWebHashHistory路由带#

http://localhost:3001/#/home

history每次刷新会向后端发起请求，需要和后端配合，如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。


 

momo（激进版）
关注
专栏目录
Vue路由中的hash和history模式的区别及原理
qq_42267338的博客
09-27 230
众所周知、vue-router具有hash、history两种路由模式。以Vue3为列const router = createRouter({ history: createWebHistory(), // 或者 createWebHashHistory routes })但是选择哪种模式比较合适呢，下面我们来探讨两种模式的优点及缺点。
Vue3 中 createWebHistory 和 createWebHashHistory 的区别
小源同学的博客
04-22 2017
服务器配置： 需要服务器配置来处理所有路由请求，以便正确地返回 index.html 文件，以便在客户端渲染应用程序。刷新时问题： 刷新页面时，如果服务器不正确配置，会导致 404 错误，因为服务器无法找到对应的路由。
Vue3 中创建路由的history对象的工厂函数-- 聊聊createWebHistory 和 createWebHashHistory的区别
最新发布
IT_WEH_coder的博客
07-30 563
在Vue3中，createWebHistory和createWebHashHistory都是用于创建路由的history对象的工厂函数。它们的主要区别在于URL的格式以及对浏览器历史记录的影响。
Vue3【二十一】Vue 路由模式（createWebHashHistory /createWebHistory ）和RouterLink写法
Ggome的博客
06-13 4275
Vue3【二十一】Vue 路由模式和普通组件目录结构createWebHistory history模式：url不带#号，需要后端做url适配 适合销售项目 利于seocreateWebHashHistory Hash模式：url 带#号，不需要url适配，比较适合后端项目 不利于seo路由命名 和 配置路由规则Header 组件是一般组件一般放到components文件夹中News About Home 组件是路由组件，一般存放在pages或views文件夹中/*注意。
VUE3.0 路由（routes） createWebHistory和createWebHashHistory区别
总结前端开发中遇到的问题，分享前端知识
01-14 6999
createWebHistory路由模式路径不带#号： const router = createRouter({ history: createWebHistory(), routes}); createWebHashHistory路由模式路径带#号： const router = createRouter({ history: createWebHashHistory(), routes});
hash路由和history路由
mz929的博客
07-16 1012
在实际开发中，可以根据项目需求和浏览器兼容性考虑选择使用 Hash 路由还是 History 路由。如果需要兼容性较好且对 SEO 较为重要，可以选择 Hash 路由。如果目标浏览器支持 HTML5 History API，并且希望 URL 更加美观且对 SEO 友好，可以选择 History 路由。同时，也可以使用前端框架（如 Vue Router 或 React Router）来抽象和简化路由的管理和切换过程。Hash 路由和 History 路由是前端路由的两种常见实现方式。
Vue——vue路由模createWebHashHistory和createWebHistory的区别
qq_43201350的博客
10-09 4502
Vue——vue3路由模createWebHashHistory和createWebHistory的区别
vite+Vue3 createWebHistory 路由前缀配置
拿回忆下酒
06-08 2635
作为前端最火的前端框架之一，大家在使用的过程中必不可少需要使用(路由)。路由有和两种，本期主要针对下使用和配置，进行简单介绍。
路由模式createWebHashHistory 和 createWebHistory 的区别
04-21
createWebHistory 是基于浏览器的 HTML5 history API 实现的，它可以实现路由的前进后退功能，但需要后端服务器的...因此，createWebHashHistory 适合于纯前端开发的应用，而 createWebHistory 适合服务端渲染的应用。
vue3学习笔记—vue-router（3）
weixin_45888650的博客
03-12 93
vue3学习笔记—vue-router（3）
Vue3中路由的引入和基本使用
weixin_49042147的博客
03-09 1888
Vue3中路由的安装引入和基本使用 本文采用setup语法糖
手把手教你搭建vue3项目-Router
weixin_43618130的博客
03-15 2902
Router Vue官方路由 目录 创建项目 组件推荐 axios封装 Vuex封装 Router封装 安装 npm install vue-router@4 封装 对于路由的封装主要是路由的配置和路由守卫 import { createRouter, createWebHistory, createWebHashHistory, } from 'vue-router' import { ROUTING_MODE, BASE_URL } from '../config' const r
vue3中createWebHistory如何使用
02-22
在上面的示例中，我们首先从'vue-router'模块中导入createRouter和createWebHistory函数。然后，我们使用createWebHistory()创建一个基于浏览器的路由历史记录对象，并将其作为history选项传递给createRouter函数。...
Vue3路由配置createRouter、createWebHistory、useRouter,useRoute
热门推荐
看见小狮子没
09-22 1万+
Vue3和Vue2基本差不多，只不过需要将、从中引入，再进行使用。
如何使用 Vue 路由器
allway2的博客
02-15 1744
现代单页 Web 应用程序 (SPA) 最强大的功能之一是路由。现代单页应用程序（例如 Vue 应用程序）可以在客户端从一个页面转换到另一个页面（无需请求服务器）。Vue Router是 Vue 应用中页面导航的官方库。Vue Router 使用简单，但功能强大。在本文中，我们将深入探讨Vue Router 4（与 Vue 3 一起使用）。我们将介绍您需要了解的所有内容，以舒适地使用 Vue Router。 我们将涵盖： Vue 路由器基础知识 动态路由 如何传递路由器参数 延迟加载 无论您是
Vue3 + Vite 实现项目搭建
大家好，我是+V
07-02 8453
创建 Vue3 项目有两种常见的方式，一种是想 vue2 版本一样使用脚手架工具创建，创建 vue3 项目的脚手架必须是4版本以上的，另一种方法就是使用 vite 创建，为什么使用 vite 呢？因为快！贼快！vite 官网：https://cn.vitejs.dev/安装 vite 构建工具： Vite 创建 vue3 项目 创建一个项目名称为 的项目： 项目创建完成的目录结构就是这个样子的。 然后进入文件夹，安装依赖，启动就可以了。然后使用 Vite 创建的项目真的厉害，秒开，不用打包直接启动。安
路由器的两种工作模式：hash模式和history模式
weixin_66059613的博客
11-29 2873
路由器的两种工作模式：hash模式和history模式
vue路由设置
sharesb的博客
05-27 4596
最主要的配置文件index.login，该文件 将地址和页面关联起来 import { createRouter, createWebHashHistory } from "vue-router"; // 导入要显示的文件 import login from "../views/Login.vue"; import register from "../views/register.vue"; //路由配置文件 // 创建路由管理对象 const router = createRouter({ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值