vue-router先hash模式部署项目,然后开启histroy模式 ,引发的几个问题以及histroy模式的开启方式、优点

简介: 前言:vue路由有一个HTML5 History 模式,这个模式要在路由里面另外开启的,很多人在刚使用路由的时候之前不知道这个模式,所以并没有启用,然后就把项目部署上去了,因为这个模式还是有挺多优点的,最后还是会开启这个模式。然而因为之前使用hash模式再改为histroy模式还是有些问题的,我已经踩过坑了,然后把这几个问题写出来。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。本文首发于我的个人blog:obkoro1.com开启history模式:如果不开启的话,路由默认是hash模式,开启这个模式前端的工作也很简单,如下:

前言:

vue路由有一个HTML5 History 模式,这个模式要在路由里面另外开启的,很多人在刚使用路由的时候之前不知道这个模式,所以并没有启用,然后就把项目部署上去了,因为这个模式还是有挺多优点的,最后还是会开启这个模式。

然而因为之前使用hash模式再改为histroy模式还是有些问题的,我已经踩过坑了,然后把这几个问题写出来。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。


开启history模式:

如果不开启的话,路由默认是hash模式,开启这个模式前端的工作也很简单,如下:

mode: 'history' //在路由那里配置一下这个

最后需要后端的做一些配置配合,这里可以参考一下文档给的栗子

history模式的优点:

1.url变成真正的url,url看上去更好看。

http://yoursite.com/#/a/b  //hash模式
 http://yoursite.com/a/b  //history模式

2.可以使用vue-router的滚动行为,这个用来记忆进入其他页面之前的位置非常好用,配置一下就可以直接使用了,前提是开启histroy模式。

image.png

3.类似项目引入微信js-sdk的时候,一些操作是对url是有要求,url不能带上'#',如果没有开启histroy模式,很可能会导致问题。

4.像vue-cli的配置,都是以路由开启history模式的标准来配置的(下面会讲到一个栗子),没有开启的话,自己要另外配置。

先hash模式,后histroy模式

就像开头说的,这里的问题指的是:先用hash模式部署项目到线上,然后再开启histroy模式,由此引发的一些问题。

1.找不到资源问题:

在hash模式下面,直接打包的话,会导致找不到css、js和图片资源,然后经过百度之后,做出了如下截图的配置操作,更改assetsPublicPath:'/'assetsPublicPath:'./'

image.png在hash模式下,像上面那么配置就没有问题了。当时我还以为vue-cli配置有问题,实际上,人家才没有问题呢,是我们自己没有开启history模式的问题。

然后开启了histroy模式之后,因为我们之前更改了assetsPublicPath属性,所以要把那个.给去掉,改回来:assetsPublicPath:'/'

2.请求带上路由,导致请求失败

正确的请求是:

http:www.xxx.com/api/接口 //api是我通过proxyTable转发地址的代理名字

开启histroy模式之后:

在二层的路由里面会出现这种情况:

路由是:http:www.xxx.com/a/b
    http:www.xxx.com/api/a/接口 //这就导致了请求失败,要把a也去掉才是正确的

解决方式是:

因为我用的是axios,所以可以在全局请求中设置一个baseURL,这个baseURL就是项目的网站地址(http:www.xxx.com),然后二层的路由也会自动去掉前面的a和b。

3.cookie问题

这个实际上不是个问题,完全是自己作的,我把项目分为两层。所以从a登录,b那边刷新就会出现没有cookie的情况

两层路由
    http://yoursite.com/a
    http://yoursite.com/b

这里是因为cookie能否拿到跟存储的路由位置是有关的,之前使用hash模式因为hash模式的urlhttp://yoursite.com/#/a/b,会统一存在http://yoursite.com下面。

而history模式cookie就会存在http://yoursite.com/a或者http://yoursite.com/b下面,另外一边就会没有cookiie。

解决办法:

  1. 不要分为两层,统一所有的路由都在一个路由地址下面。
  2. 在项目的路由的根地址path:'/'里面存cookie。
  3. 使用sessionStorage存信息,我就是用这个方法,使用方法
    sessionStorage只要在http://yoursite.com都可以访问的到,不管是存在a上面还是b上面。


目录
相关文章
|
4月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
168 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
8天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
54 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
9天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
56 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
44 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
12天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
55 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
4月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
300 2
|
4月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
56 3
|
10天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
62 12
|
29天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
146 1
|
3月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。

热门文章

最新文章