Vue-Router的hash模式和HTML5 模式

最新推荐文章于 2024-08-07 14:52:30 发布
最新推荐文章于 2024-08-07 14:52:30 发布
阅读量410 收藏
点赞数
分类专栏： Vue知识 文章标签： vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43416349/article/details/124767256
版权

hash模式 url 后面带有 # ，例如www.hahah.com#home/cate 在向后端请求数据时，发送的url是www.hahah.com，不会带有#后面的url。

HTML5模式，不带#，例如直接访问 www.hahah.com/home/cate，发送的url是www.hahah.com/home/cate，但后端没有这个url，就会404.

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

官网解释：​​​​​​不同的历史模式 | Vue Router

一路向阳~负责的男人
关注
专栏目录
html5使用vue路由,Vue2.0笔记——vue-router路由
weixin_32535637的博客
06-17 1300
简介使用Vue.js开发SPA(Single Page Application)单页面应用。vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router可以实现页面间传参等其他功能；基本用法当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)...
Vue-router 中hash模式和history模式的区别
丹
10-31 616
咱们今天说说VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。 咱们来看看小白的回答。 小白回答：hash模式url带#号，history模式不带#号。 回答总结：这个回答其实和没有回答是一样，百度一下都知道了，官网文档也有，如果这样回答就能通过，那么那个面试官问这个问题又有什么意义呢？其实这个问题的意义是考验你的开发经验，与实际场景的应用和与后端人员的配合。 大牛解答：.
一文了解vue-router之hash模式和history模式
10-16
主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
angular的Hash 模式和 HTML 5 模式
weixin_33948416的博客
05-05 372
去除地址 # ，将{ provide: LocationStrategy, useClass: HashLocationStrategy }改为 { provide: LocationStrategy, useClass: PathLocationStrategy }, { provide: APP_BASE_HREF, useValue: '/' }即可 示例代码中的...
vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404
最新发布
徐同保的专栏
08-07 453
vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404
Vue Router Hash模式和Html 5模式的区别
oneslide
05-17 545
html5 mode 和 hash mode 是 Vue Router 两种不同的导航模式。
Vue-router 中 hash 和 html5 两种路由监听方式
weixin_43443341的博客
12-15 1887
如果你用过 Vue，那你一定知道 vue-router，它给开发者提供了两种路由方式。这两种不同模式的路由方式，它们对路由的监听方式也不同。
vue 路由html页面,Vue-router 使用HTML5模式
weixin_35638013的博客
06-03 2289
Vue-router 使用HTML5模式二哲 web前端开发虽说以前一直知道mode如何配置HTML5模式，但是一直没有真正使用过。顺着思路，看着文档今天依旧搞了好久好久！心好累啊。https://router.vuejs.org/zh-cn/essentials/history-mode.html先给出具体文档地址，由于我的页面不是纯静态的，所以不能直接用nginx配置，如果你是纯静态的那直接...
Vue-Router模式和钩子的用法
11-26
const router = new VueRouter({ 　mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择，history 和 hash，大致对比一下， 模式 优点 缺点 hash ...
html5路由概念中的history模式和hash模式的区别
zy103118的博客
11-13 1053
1 这里的hash是指url尾巴后的#号及后面的字符。这里的#和css里的#是一个意思。hash即：#这里意味着锚点，本身是用来做页面定位的，她可以使对应id的<element>元素显示在可视区域内。由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发javascript语言的hashchange事件，浏览器的前进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。前端开发中的路由概念就是<a&gt.
html5的 history模式和hash模式
aliven1的博客
10-16 608
直观区别 hash 带一个# history 没有# 各自特点 hash: 仅 hash 符号之前的内容会被包含在请求中，**因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。**（这就是前端人员比较喜欢的，不用出404） history: 前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。 如果后端缺少对 /book/id 的路由处理，将返回 404 错误。 ...
浅谈前端开发模式和url的hash模式以及html5的history模式
抗争小青年的博客
08-07 300
在前端开发初期，最开始设计模式并不清晰，到后来总结经验后，逐步完善，有了目前的前端开发方式。本文也顺着时间线，给大家讲解相关概念。(SSR)：类似JSP，网页直接从后端进行渲染（服务端），再向客户展示(BSR)：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。：URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且交给一个Controller进行处理。可以更改页面指向，同时也不会请求资源...
Vue.js前端开发零基础教学（六）
m0_73490019的博客
04-16 551
学习目标了解什么是路由，能够说出前端后端路由的原理掌握多种路由的使用方法，能够实现路由的不同功能掌握Vue Router的安装及基本使用方法。
vue-router H5模式和Hash模式
sunshine的博客
08-24 531
在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。
【VUE3】Hash模式与HTML5模式使用区别
印记
04-27 461
Hash模式 const router = createRouter({ history: createWebHashHistory(), routes: whiteRouterMap }) publicPath: './'...
url的hash和HTML5的history模式
webchang的博客
01-18 1364
url的hash模式和HTML5的history模式，两者的含义和区别
vue项目去掉URL中的#
热门推荐
sunliyings17的专栏
04-08 1万+
去掉VUE项目路径中难看的#号，所经历的过程，和踩过的坑
Vue路由守卫（导航守卫）
好好学习，天天向上！
01-11 1704
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中： 全局的, 单个路由独享的, 或者组件级的。 全局守卫 全局前置守卫 router.beforeEach 全局解析守卫router.beforeResolve 全局后置钩子router.afterEach 全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ... }) router.bef.
vue-router hash模式
07-25
hash 模式是 Vue Router 的一种路由模式，它使用 URL 的 hash（即 # 符号后面的部分）来模拟路由，不会触发浏览器的页面刷新。 在使用 Vue Router 时，默认情况下会使用 hash 模式。你可以在创建 Vue Router 实例时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值