vue去掉#，history模式_不求甚解bc的博客-CSDN博客_vue 去掉
vue去掉#，history模式
不求甚解bc
于 2018-08-14 17:11:15 发布
24369
收藏
23
分类专栏：
vue
文章标签：
去#
history
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bocongbo/article/details/81670072
版权
vue
专栏收录该内容
25 篇文章
0 订阅
订阅专栏
一、vue项目携带一个#会对开发造成一定的影响：
1、微信三方登录回调地址，有#号时，接收不到code参数
2、微信H5支付的回调地址，不允许有#
3、App分享，处理特殊字符时，可能会对#进行编译
4、有点影响美观
现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。话不多说，开始去掉#吧。
二、去#的原理
vue把#当做自己的根目录，静态资源，比如图片。
去掉#后，要采用相对路径去引用，如果图片引用是在js内，则要采用require()方法进行引用。
去#后台渲染，请参考vue官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html
三、去掉#方法
1、首先判断产线项目是否放在域名根目录下
在router/index.js文件中，添加history模式
如果项目不在根目录下，比如产线项目根目录为 http://www.baidu.com/project-name/
export default new Router({
mode: 'history',
base: '/project-name/', //如果项目根目录不为域名，则添加该行
routes: [{}]
})
2、修改config/index.js文件
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/project-name/', //添加根目录，如果域名为根目录，则为 '/'
3、去掉#，对项目的根目录造成影响，这是不可避免的，再次强调，确保静态资源文件路径正确。
四、Apache，Nginx等服务器部署vue项目请参考我的另一篇博客：
https://blog.csdn.net/bocongbo/article/details/83957206
不求甚解bc
关注
关注
点赞
23
收藏
打赏
评论
vue去掉#，history模式
一、vue项目携带一个#会对开发造成一定的影响：1、微信三方登录回调地址，有#号时，接收不到code参数2、微信H5支付的回调地址，不允许有#3、App分享，处理特殊字符时，可能会对#进行编译4、有点影响美观现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。话不多说，开始去掉#吧。二、去#的原理vue把#当做自己的根目录，静态资源，比如图片。去掉...
复制链接
扫一扫
专栏目录
VUE路由去掉“#”
g2526的博客
09-21
1352
问题：今天做项目优化 发现地址栏带了个#号，觉得有点丑，想要去掉
解决方法：在路由文件把mode改为history,原来是hash,果然解决掉了 带#号的问题。
但是又发现个新问题，在根目录引入的静态文件 是没有问题的，但是在子页面引用的静态文件就会有问题，引入静态文件是加个@号引入。
同样的引入方式同样的文件，home页是能加载出来的，子页面就加载不出来，然后度娘找了下答案，原来是因为hash模式下,根路径是不会变的，但是使用history模式后，根路径就不固定了。
那么这种引入方式就不可
vue路径中去除#
lpfasd123的博客
07-16
8566
vue使用vue-router时，路径中会有#的字段，是应为打包完成之后，项目为单页面项目，所有的url都指向单个页面，#号之后的路径是指该页面的锚定位置，所以router中的路径是无法加载的。若想去除#，就需要使用router的history模式， 且在服务器端进行配置
import Vue from 'vue'
import Router from '...
评论 3
您还未登录，请先
登录
后发表或查看评论
vue-router在history模式下，实现动态base
最新发布
H_yelin的博客
11-02
169
vue动态路由思路
vue路径后面去除#号
xy19950125的博客
12-28
3763
介绍：vue项目中 打开页面后 后面路径带#号 例如 http://192.168.1.187:8082/#/rejectionManagement
面试的时候 很多面试官都会问 路径后面的#如何去除 其实很简单 只需要一个属性 mode：''history''
import Vue from 'vue'
import Router from 'vue-router'
import Hell...
vue地址去掉 #
热门推荐
前端很忙
10-19
3万+
vue去掉#，vue地址#，vue路由#
如何去掉VUE路由地址中的#号
super帅的博客
06-15
2132
如何去掉VUE路由地址中的#号
vue项目地址栏中去除# 打包部署成vueHistory模式刷新后404如何配置nginx服务
weixin_42599091的博客
04-30
654
vue项目去除#
在router文件夹下的index.js中的router实例中添加mode属性，值设置为history
export default new Router({
mode:"history",//去除哈希值的#号
routes
})
使用这种模式需要后端的配合，如果没有后端的配合在打包的时候页面会是空白或者刷新404。一般还是使用hash模式
后台nginx服务...
nginx解决vue上线去掉#的方法
caichenglongcsdn的博客
07-23
2796
最近vue项目要上线了，但是习惯于原来的网址方式，vue是自动会追加#的，后来出于强迫症，就像把这个#去掉，一方面看着舒服，另一方面对于一写网站的分享的问题也会避免，例如微信H5分享会把链接#后面的忽略掉，于是我就在nginx上面进行了一下处理。
server {
listen 80;
server_name www.xx.com;
location / {
root /opt/index/dist;
index index.html index...
vue使用去掉路由上面的#，打包后请求404或者空白页
liang_336的博客
01-09
1289
首先我是一个后端，自己写了点vue的东西，但是启动发现路由总是多了一个#，蓝瘦！！！
百度发现在router/index.js加 **mode: ‘history’,**就ok了
网上说他默认是hash模式的，具体区别我百度放下面了
可选值 ： ‘hash’ | ‘history’ | ‘abstract’
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5...
vue2和vue3去掉地址栏里的#号
qq_55928824的博客
07-13
734
vue2和vue3去掉地址栏里的#号
Ubuntu(Nginx) Vue history模式去掉#号
shiyue41的博客
06-20
577
1.Vue项目配置
router/index.js
添加mode为history
base的shiyue41为打包后的项目名字
2.使用nginx配置vue项目
1.下载nginx
sudo apt-get install nginx
2.启动nginx
service nginx start
报错
Job for nginx.service failed because the control process exited with error code.
See "systemctl status
HTML5 History 模式 去除# （vue路由去除#、常见配置、Tomcat配置）
weixin_38047955的博客
04-12
2207
前言：
vue使用vue-router时，路径中会有#的字段，是应为打包完成之后，项目为单页面项目，所有的url都指向单个页面，#号之后的路径是指该页面的锚定位置，所以router中的路径是无法加载的。
若想去除#，就需要使用router的history模式， 且在服务器端进行配置
核心：
const router = new VueRouter({
mode: 'histor...
如何去掉vue路径中的“#”号
baby_dewo的博客
10-12
5119
如何去掉vue路径中的“#”号
我们在vue项目中使用vue-router时，路径中会有 # 号，这样看着也不舒服。其实是因为路由有两种模式 hash 和 history，我们平时直接使用的是默认的hash，所以路径会有 # 号，因此我们只需要修改成 history 就可以了，如下图：
laravel框架后台配置
在web.php里添加路由：
Route::get(’/{all}’, function () {
return view(‘welcome’);
})->where([‘all’ =&g
学习Vue的常见问题
x-dragon8899的博客
06-16
2145
一、消除router-link的下划线
要消除下划线，增加一下样式代码即可：
* {
text-decoration: none;
.router-link-active {
text-decoration: none;
关于vue3 history相关问题解决方案
yyh231366的博客
03-27
1902
我实际操作了一下,我觉得有必要纠正一下,在实际开发种,实际上,可能我的上一章节匹配,会出现一些小问题
他会告诉你,你匹配的方式不对,不能用这种方式!于是你就去找,正则匹配方式,然后利用重定向
这次系统又会告诉你,栈溢出问题,我们先看栈溢出啥意思
在代码中的某个地方，您正在调用一个函数，该函数又调用另一个函数，依此类推，直到达到调用堆栈限制。这几乎总是因为具有未满足的基本情况的递归函数
这是官方说的一句话,不过其实好像自己懂了,又好像没懂,假设说我们用的是重定向,你这个时候,确实跟上面的说的一样,其实
VUE3（十八）vue 路由history 模式去掉 URL 中的 # （nginx）
camellia的博客
03-25
1614
这部分内容比较少。其实更多的是参考一下vue-router4的官方文档就好。
但是，这部分还是拿出来说一下。
1：router.ts
// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
* 定义路由数组
*/
const rout
vue 路由去掉#之后的配置
weixin_42910765的博客
10-09
263
const router = new Router({
mode: 'history', //去掉url中的#
routes: []
---------
NGINX中 VUE路由去掉#后的配置问题
location =/ {
rewrite index.html permanent;
try_files $uri $uri/ /index.html;
具体可查看
另一个
...
nginx服务器配置vue-router history模式（去除url中的#号）
weixin_34290631的博客
12-27
3362
前言：关于单页原理 hash模式和history模式 请自行查阅资料
-------
复制代码
按照vue-router官网的办法
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
问题的起因是配置nginx后，发现页面刷新失败，报错：Uncaught SyntaxError: Unexpected to...
Vue - 去掉路由中的#号
老麦克
03-06
2398
vue-router默认是hash模式，在hash模式下，是会有#号在URL上，可以在路由的第一行添加 mode:history来去掉#号。
const router = new Router({
mode: 'history',
routes: []
})
去掉vue项目的浏览器图标
weixin_38999134的博客
05-21
7819
index.html
<!-- 去掉vue项目默认图标 -->
<link rel="shortcut icon" href="#"/>
在webpack.dev.conf.js和webpack.prod.conf.js文件中
全局搜索favicon，注释掉favicon相关代码
删掉根目录下的favicon.ico文件
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：精致技术
设计师：CSDN官方博客
返回首页
不求甚解bc
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
89
原创
3万+
周排名
164万+
总排名
56万+
访问
等级
5048
积分
63
粉丝
184
获赞
57
评论
462
收藏
私信
关注
热门文章
vue浏览器返回监听
40450
vue mock数据，模拟后台接口
35053
nginx解决跨域
29880
vue去掉#，history模式
24369
js操作localstorage
19552
分类专栏
Nginx
8篇
html
6篇
react
5篇
公祭日
1篇
git
4篇
jenkins
3篇
less
1篇
ts
1篇
vue
25篇
jquery
2篇
前端软件
10篇
css
8篇
js
19篇
兼容性问题
4篇
小程序
4篇
eggjs
15篇
linux服务器
10篇
最新评论
TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题
古德曼955:
已解决，就是重新安装这个包npm install error-stack-parser@2.0.6
vscode自动添加作者、时间信息
Python哥:
老哥，我这边操作不出来呀
git未保存变更迁移到其他分支
孤独员:
有冲突的位置 释放储存的时候还是要解决冲突吧
vue图片懒加载
辣可乐少加冰:
vue浏览器返回监听
好心小萍宝:
调了history.pushState，会导致要点击两次返回按钮才能触发呀
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题
nginx重写url
获取本地外网ip的api接口
2022年5篇
2021年25篇
2020年7篇
2019年14篇
2018年36篇
2017年2篇
目录
目录
分类专栏
Nginx
8篇
html
6篇
react
5篇
公祭日
1篇
git
4篇
jenkins
3篇
less
1篇
ts
1篇
vue
25篇
jquery
2篇
前端软件
10篇
css
8篇
js
19篇
兼容性问题
4篇
小程序
4篇
eggjs
15篇
linux服务器
10篇
目录
评论 3
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
不求甚解bc
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值