vue 使用history模式

最新推荐文章于 2024-08-27 15:40:35 发布
最新推荐文章于 2024-08-27 15:40:35 发布
阅读量1.8k 收藏 3
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21115567/article/details/97803152
版权

最近做了一个vue项目,需要分享功能,分享时需要把当前链接通过短链方式分享出去,
后台需要接收一个url和userid然后生成短链,
vue默认是用hash模式,hash模式会带有一个#,导致后台不能正确返回
所以想到了用history模式,改成history模式后出现页面空白
个人总结了一下使用history模式需要以下步骤:
1.修改router.js
在这里插入图片描述
2.修改vue.config.js
在这里插入图片描述
3.修改ngix配置
在这里插入图片描述

雨顺518
关注
Vue History 模式
Libra_rookie的博客
05-19 352
一、vue项目携带一个#会对开发造成一定的影响： 微信三方登录回调地址，有#号时，接收不到code参数 微信H5支付的回调地址，不允许有# App分享，处理特殊字符时，可能会对#进行编译 有点影响美观 现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。话不多说，开始去掉#吧。 二、去#的原理 vue把#当做自己的根目录，静态资源，比如图片。 去掉#后，要采用相对路径去引用，如果图片引用是在js内，则要采用require()方法进行引用。 去#后台渲染，请参考vue官方文档 https
详解Vue路由History mode模式中页面无法渲染的原因及解决
11-30
Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用，是非常简单的。...如果因为业务需要，或者单纯是觉得带#号不美观，那么可以使用history模式，简单而言就是在router的配置文
Vue 项目中 history 路由模式的使用
lwaner的博客
07-10 1011
在最近帮客户开发的一个项目中，由于项目的特殊性，需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中，总结问题的解决方案并记录下来，希望能够保留这篇文档，以备将来遇到同样问题可以顺利解决。
绝对能看懂的Vue-Router之history模式
最新发布
weixin_41092986的博客
08-27 466
Vue-Router之history模式
Vue进阶（七十七）：vue 路由的两种模式：hash与history_vue创建中的history
2401_84447233的博客
04-29 1099
一、为了达到这个目的，浏览器提供了hash与history两种支持：为什么这两种模式实现了？hashURLhashhash#/hellohashURLHTTPhashhistory这两个方法应用于浏览器的历史记录栈，在当前已有的backforwardgo基础上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。
vue history 模式（路由）
热门推荐
qq_41772754的博客
03-24 2万+
vue 里面路由有两种显示模式是hash和history，默认是hash hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重...
Vue-History模式
huotong
06-03 309
History模式 History模式一定要结合服务器 因为router默认是hash模式加载的 <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <router-view></router...
Vue项目History模式404问题解决方法
12-01
然而，当项目使用History模式部署到服务器，尤其是Nginx服务器上时，遇到刷新页面出现404错误的问题，因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析： 在...
Vue路由history模式解决404问题的几种方法
12-10
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash...
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...
详解如何去除vue项目中的#——History模式
08-29
主要介绍了详解如何去除vue项目中的#——History模式 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue多页面项目中路由使用history模式的方法
01-21
前言 之前写了一个vue项目中需要添加一个打印的页面，需要使用多页面的模式进行开发，vue-cli3出初始化的项目配置多页面还是很容易的，但是发现print.html没有办法配置history模式的路由，一旦使用history模式的路由。写了一个简单的demo在网上寻求帮助没有能解决问题，后来没有办法只能使用hash模式完整项目了。 如何解决 有一天看webpack文档的时候，突然看到了historyApiFallback配置项，一瞬间感觉找到方法了。下班后回家就下载下之前的项目折腾了。 之前的vue.config.js中的配置是这样的， const path = require('path
vue history模式
Shuanger112的博客
12-14 910
HTML5 History 模式 言简意赅的来说，History模式就是去除掉浏览器地址栏的#号 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转...
介绍Vue router的history模式以及如何配置history模式
m0_62396648的博客
07-08 8859
history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。在history模式下，URL看起来更加整洁，没有#符号。例如，history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验。
vue路由history模式
liuxuanwei1998的博客
07-12 1085
1
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨顺518

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值