vue vue-Router默认hash模式修改为history需要做的修改_Annkeke的博客-CSDN博客
vue vue-Router默认hash模式修改为history需要做的修改
Annkeke
于 2018-02-12 11:04:28 发布
45754
收藏
分类专栏：
vue
文章标签：
vueRouter
histoty模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010289111/article/details/79315407
版权
vue
专栏收录该内容
14 篇文章
0 订阅
订阅专栏
主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题，因为未登录用户在活动页面进行操作的时候会触发到登录事件，然后我们实现的方式是通过接口来判断，该接口标记的是一个upn的值
然后登录的时候是单点登录，不知道是否回调地址不支持vue形式下hash模式的路由，因而自动忽视了后面的#路径
然后我查了一下一般回调以后#后都会默认为书签，我转义了然而还是只能职别#之前的路径
由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题（当然开始~~就是不稳定，现在有时候还是会有不稳定的问题）所以暂时不存在让他们的回调地址支持vue的hash模式路由的问题
然后我就只能修改vue Router的路由模式，修改为了hostory模式
好吧，摸索了很久不然可能真的没有办法解决
运维部署的活动地址线上的路径是  
https://xxxxx.xxxxl.com/activity
我做了两处修改
1、修改模式
2、切到网站路径下的/activity
3、其它路径切到/activity/
当然这么处理以后本地运行出来肯定是白板。因为方便我一般是切到文件夹下直接 run的
没有再本地使用搭建本地的所以，需要两份路由一份只修改模式，一份继修改模式又切换路径
然后这样只是代码上的处理我们还需要修改服务端的配置
基于运维良好的配合，才能尝试出来，很是开心
他们本来对活动做的配置
参考router官方文档
https://router.vuejs.org/zh-cn/essentials/history-mode.html
使用 try命令尝试多种配置
location
/ {
try_files
$uri
$uri
/ /index.html; }
然后完成这些设置以后线上终于可以访问 
https://xxxxx.xxxxx.com/activity/valentine
这种路径的形式了，当然这个地址是实际存在的，它并不会跳转到配置的路由的首页
Annkeke
关注
关注
点赞
收藏
打赏
评论
vue vue-Router默认hash模式修改为history需要做的修改
主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题，因为未登录用户在活动页面进行操作的时候会触发到登录事件，然后我们实现的方式是通过接口来判断，该接口标记的是一个upn的值然后登录的时候是单点登录，不知道是否回调地址不支持vue形式下hash模式的路由，因而自动忽视了后面的#路径然后我查了一下一般回调以后#后都会默认为书签，我转义了然而还是只能职别#之前的路径由于不是很清楚登录单点那一...
复制链接
扫一扫
专栏目录
vue路由模式的修改
weixin_49866713的博客
08-27
295
路由模式的修改
vue将history转成hash
weixin_44671162的博客
03-26
4495
vue将history转成hashhash更换为history模式更换需要修改2个地方：效果展示对于history和hash的两种模式的介绍history模式hash模式
hash更换为history模式更换需要修改2个地方：
1.在src\config\index.js文件中添加或修改一下
// 从history改成hash 添加的
assetsPublicPath: '/',
2.修改s...
评论 2
您还未登录，请先
登录
后发表或查看评论
vue3切换hash/history两种路由模式
最新发布
weixin_48888726的博客
11-08
297
本文介绍了在vue3中，使用history和hash两种路由模式的方法。
VUE3.0,DAY66，Vue的history模型和hash模式以及部署上线的简单流程
疯子的梦想@的博客
09-26
347
VUE3.0,DAY66history模式hash模式node写一个后台服务器区别总结
history模式
在路由配置文件index.js中更改一个属性，可以使路由从默认的hash模式变为history模式。即增加一个mode：‘history’
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../componen
路由的两种模式和重定向
QZ9420的博客
12-07
522
1）hash模式带# history模式不带#
2）如果你想让url更加规范，推荐使用history模式，是一个正常的url，适合开发。
3）使用vue或react做的页面想分享到第三方app，有的app中就规定了，你的url中不能带#，所以此时，你就只能使用history路由模式
4）hash模式所有浏览器天生支持 ,history模式，它内部使用的是h5中提供的api，兼容性没有hash模式的兼容性好
5）history模式，如果没有对应的路由的规则，可能会发起一个真正原请求，需要后端来处理，如果不处
vue3.0启用hash路由，history路由
秋来九月八
06-09
1766
vue3.0配置history和hash路由
history路由与hash路由实现的原理
vue3.0中改变router为hash或者history
浩星
03-02
6141
前言:
在这里我们分析总结下vue2.0和vue3.0改变router为hash或者history 的方法。
vue2.0
history:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
hash:
const router = new VueRouter({
mode: 'hash', //或者把这句话注释，默认就是hash
routes: [...]
})
vue3.0...
vue-router中Hash模式和History模式
老电影故事的博客
10-29
1611
vue-router 中hash模式和history模式
在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。
从用户角度看 前端路由实现了两个功能（使用ajax更新页面状态的情况下）
1、记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存的（分享）时的状态）；
2、可是使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到ajax更新页面之前的状态，url也回到之前的状态）
作为开
Vue的路由配置（Vue2和Vue3的路由配置）
weixin_46022934的博客
07-12
5305
系列文章目录
一、路由是什么？
二、Vue2中路由的创建步骤
1.安装正确的路由版本（这里我踩坑了）
2.vue2中配置路由的步骤
步骤如下：
代码如下图所示
如下图所示：
vue路由中hash模式
weixin_38069018的博客
06-30
3899
vue路由中hash模式
import Vue from 'vue'
import Router from 'vue-router'
import { router } from './router/index'
Vue.use(Router)
export default new Router({
mode: 'history',
// mode: 'hash',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 })
Vue路由切换的两种方式
qq_51133939的博客
08-11
1719
vue路由切换的两种方式：1. 标签切换；2. js切换
vue3中路由hash与History的设置
qq_54123885的博客
10-19
845
history模式直接指向history对象，它表示当前窗口的浏览历史，history对象保存了当前窗口访问过的所有页面网址。URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。当使用history模式时，URL就像这样：hhh.com/user/id。相比hash模式更加好看。虽然history模式不需要#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。
vue3 路由hash与History的设置
john987321456的博客
02-16
4898
一、history
关键字：createWebHistory
import { createRouter, createWebHistory } from 'vue-router'
const routes = [ {
path: '/userinfo',
name: 'UserInfo',
component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
history: createW
48. 配置使用VUE - router 路由 和 修改路由模式为 histroy
Bi-Hu的博客
08-11
333
使用路由大概步骤：
1.新建一个包含路由组件的vue项目，当然你也可以用命令安装：
命令安装路由【个人推荐直接新建脚手架的时候选中即可】：
npm install vue-router --save
2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
导入路由对象，并且调用 Vue.use(VueRouter) -> 创建路由实例，并...
vue路由设置Hash和History
weixin_45599105的博客
07-08
509
vue路由hash和history
vue3.x router4.x 路由hash与History的设置
想搞全栈的前端
12-30
1061
vue3.x router4.x 路由hash与History的设置
关键字：createWebHistory createWebHashHistory
vue路由配置
m0_57108418的博客
07-07
6059
二、配置路由
在根目录下创建文件夹router，在router文件夹下创建index.js文件，如下图所示在index.js文件中写入如下代码，实现创建一个路由器
如上图，配置好了一个路由器，里面包含了2个路由，分别为student，school 路由在跟目录下创建view或者page文件夹，创建student，school两个路由（vue文件），如下图 在main.js中注册路由
编辑student.vue路由
编辑school.vue路由
在app.vue中进行路由的使用
四、效
技巧6 vue/js地址列表中默认地址的做法|如何将指定索引项设为默认
yangyangdt的博客
01-27
949
vue/js地址列表中默认地址的做法|如何将指定索引项设为默认
Vue路由模式：hash和history
月光晒了很凉快的博客
09-17
618
路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。SPA(Single Page Application)单页面应用程序,基于前端路由而起：整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。前端路由有两种模式：hash 模式和 history 模式。概述：hash 路由模式是这样的：。 有带号，后面就是 hash 值的变化。改变后面的 hash 值，它不会
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
Annkeke
CSDN认证博客专家
CSDN认证企业博客
码龄10年
暂无认证
90
原创
16万+
周排名
8768
总排名
33万+
访问
等级
3820
积分
粉丝
21
获赞
15
评论
45
收藏
私信
关注
热门文章
vue vue-Router默认hash模式修改为history需要做的修改
45754
css3 animation动画，设置循环间的延时执行
21226
box-shadow 制作单边阴影效果,不影响其它边的效果
17459
关于input的placeholder的样式设置问题，兼容多种浏览器
15354
高性能JS 动态脚本加载loadScript
14237
分类专栏
h5
7篇
megento
12篇
java 基础
3篇
Android基础
6篇
css
33篇
less
JQuery
10篇
css3
23篇
js
25篇
version
2篇
sass
1篇
vue
14篇
svg
2篇
最新评论
box-shadow 制作单边阴影效果,不影响其它边的效果
m0_60378651:
你好像写反了
设置动画的执行次数
Thugstyle_:
是animation-iteration-count 大哥你写错了
vue vue-Router默认hash模式修改为history需要做的修改
思念不断念:
楼主你好还在吗，有几个问题想问下你，很急
csdn中如何查看排名
看天上的蓝:
兄弟 是在主页的哪看呢？
csdn中如何查看排名
小杨算法屋:
CSDN的主页有一个排名，你把鼠标放上去也可以看到，亲试有用
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
操作 select的options对象
详情页返回列表页，列表状态缓存
表单校验，日期比较
2022年6篇
2019年1篇
2018年18篇
2017年39篇
2016年47篇
2015年33篇
目录
目录
分类专栏
h5
7篇
megento
12篇
java 基础
3篇
Android基础
6篇
css
33篇
less
JQuery
10篇
css3
23篇
js
25篇
version
2篇
sass
1篇
vue
14篇
svg
2篇
目录
评论 2
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
Annkeke
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值