Vue-router 中hash模式和history模式的区别

小白回答：hash模式url带#号，history模式不带#号。

大牛解答：

形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传；

功能上：比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok了

hash模式：即地址栏 URL 中的 # 符号

比如这个 URL： http://wwwabccom/#/hello ， hash 的值为 #/hello

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

这两个方法应用于浏览器的历史记录栈，在当前已有的 back()、forward()、go() 方法的基础之上，这两个方法提供了对历史记录进行修改的功能。当这两个方法执行修改时，只能改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行

即地址栏 URL 中的 # 符号,这个#就是hash符号，中文名哈希符或锚点

比如这个 URL： http://wwwbaiducom/#/home ，hash 的值为 #/home

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

路由的哈希模式其实是利用了windowonhashchange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，这样能够找到对应页面进行加载

HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要前端自己配置404页面。

pushState() 和 replaceState() 这两个神器的作用就是可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404（因为浏览器一旦刷新，就是去真正请求服务器资源）

那么如何去解决history模式下刷新报404的弊端呢，这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（indexhtml），前后端联手，齐心协力做好“挂羊头卖狗肉”的完美特效

pushState方法、replaceState方法，只能导致history对象发生变化，从而改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行

popstate事件的执行是在点击浏览器的前进后退按钮的时候，才会被触发

一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来确实有些不太美丽。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 historypushState API 来完成URL 跳转而无须重新加载页面。 Vue-router 另外，根据 Mozilla Develop Network 的介绍，调用 historypushState() 相比于直接修改 hash，存在以下优势:

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL

pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中

pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串

pushState() 可额外设置 title 属性供后续使用

传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发

而前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换

什么是vue？Vuejs是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。其实抛开官方的一些不知所云的说法，简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令，这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了vue，这些问题都不复存在。在比如一些单网页制作成的应用程序，一般涉及到数据交互的内容都很多，而应用了vue之后将大大缩减工作量。

如果你想要学好web前端最好加入一个好的学习环境，可以来这个Q群，首先是132，中间是667，最后是127，这样大家学习的话就比较方便，还能够共同交流和分享资料

vue在web开发，网站制作中有哪些显著优势？1数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。2组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。

vue-esign插件实现手写电子签名

1功能

兼容 PC 和 Mobile；

画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）；

自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；

支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。

导出格式为 base64；

vue-esign技术是基于html5代新特性，canvas技术进行的组件化封装，在那个页面需要用到签字技术，只需要引入vue-esign组件即可。这个组件其实也是可以理解为是一个插件。

右边控制台输入的就是生成的签名画布转成base64格式的信息

VUE视频剪辑app是一款摄影摄像类型的软件。 用户们可以通过VUE视频剪辑app进行剪辑，添加自己喜欢的特效、滤镜、字幕，让视频变得更加的好看，还能对视频的播放速度自行进行调整，非常的实用。 视频编辑片段编辑、剪裁、分割、快放、慢放、旋转缩放、视频合并、马赛克、去水印、倒放、压缩、复制、横屏大片、竖屏手机、方块小视频、多种参数调节。 视频配乐对视频进行配乐，也可选择下载本地音乐进行配乐，如果不能获取本地音乐，请通过扫描进行添加本地音乐。 视频字幕多段字幕，视频字幕、淡入淡出、滚入。

首先打开VUE进入拍摄页面，然后点击左下角的“导入视频”按钮，接着对导入的视频进行编辑，编辑完成后请点击右下角的“仅保存”按钮，这样编辑的视频会自动保存在手机相册中。

手机使用小技巧：1编辑视频--打开剪影App进入首页，然后点击“开始创作”按钮，接着将手机相册中视频导入App中，如果我们不想视频的原声，那么请点击“关闭原声”按钮，此时视频就没有了声音，之后点击“添加音频”按钮，页面下方就会出现许多音乐以及音效等选择，进入后选择合适背景音乐即可。

除了为视频选取背景音乐以外，您还可以使用剪辑、文本、贴纸、画中画、特效、滤镜、比例、背景以及调节功能。视频编辑完成以后，请点右上角“导出”按钮，此时已编辑好的视频会自动保存在手机相册中，并且还会提示您一键分享到抖音短视频平台。

2、剪切视频画面大小--我们以iPhoneX手机为例，将手机升级至iOS13系统以后，手机就具有视频剪辑功能。首先打开手机相册应用，然后打开一段视频，接着点击“编辑”按钮，此时拖动下方的滑块就可以截取视频长短，同时还可以裁剪视频画面大小，截取完成后请点击“存储”按钮。