精华内容
下载资源
问答
  • Vue.js 中hash路由和history路由原理及优缺点
    千次阅读
    2020-06-29 21:03:31

    Vue.js 中hash路由和history路由原理及优缺点

    hash模式:

    1. 原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
    2. 优点:
      (1) 只需要前端配置路由表, 不需要后端的参与
      (2) 兼容性好, 浏览器都能支持
      (3) hash值改变不会向后端发送请求, 完全属于前端路由
    3. 缺点:
      (1) hash值前面需要加#, 不符合url规范,也不美观

    history模式:

    1. 原理:
    2. 优点:
      (1) 符合url地址规范, 不需要#, 使用起来比较美观
    3. 缺点:
      (1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
      (2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

    总结: 一般情况下两种路由的模式都可以使用, 具体的使用场景可以结合以上两种模式的优缺点进行选择.

    更多相关内容
  • Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。 1、hash模式 hash模式是开发中默认的模式,也称作锚点,它的URL带着一个#,例如:www.abc.com/#/vue,它的hash值就是#/vue。 特点: ...

    Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。

    1、hash模式

    hash模式是开发中默认的模式,也称作锚点,它的URL带着一个#,例如:www.abc.com/#/vue,它的hash值就是#/vue。

    特点:

    • hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端没有影响。所以改变hash值不会重新加载页面。
    • 这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。
    • hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。

    原理:

    hash模式的主要原理就是onhashchange()事件:

    window.onhashchange = function(event){
    	console.log(event.oldURL, event.newURL);
    	let hash = location.hash.slice(1);
    }
    

    使用onhashchange()事件的好处就是,在页面的hash值发生变化时,无需向后端发起请求,window就可以监听事件的改变,并按规则加载相应的代码。除此之外,hash值变化对应的URL都会被浏览器记录下来,这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器,但是页面的hash值和对应的URL关联起来了。

    获取页面hash变化的方法:

    (1)监听$route的变化:

    // 监听,当路由发生变化的时候执行
    watch: {
      $route: {
        handler: function(val, oldVal){
          console.log(val);
        },
        // 深度观察监听
        deep: true
      }
    },
    

    (2)通过window.location.hash读取#值:
    window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。

    2、history模式

    history模式直接指向history对象,它表示当前窗口的浏览历史,history对象保存了当前窗口访问过的所有页面网址。URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。

    特点:

    • 当使用history模式时,URL就像这样:hhh.com/user/id。相比hash模式更加好看。
    • 虽然history模式不需要#。但是,它也有自己的缺点,就是在刷新页面的时候,如果没有相应的路由或资源,就会刷出404来。

    history api可以分为两大部分,切换历史状态修改历史状态

    修改历史状态:
    包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法,这两个方法应用于浏览器的历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修改时,虽然修改了url,但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果,就需要前端用上这两个API。

    切换历史状态:
    包括forward()、back()、go()三个方法,对应浏览器的前进,后退,跳转操作。

    配置:

    想要设置成history模式,就要进行以下的配置(后端也要进行配置):

    const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })
    

    3、两者对比

    调用 history.pushState() 相比于直接修改 hash,存在以下优势:

    • pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL。
    • pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。
    • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串。
    • pushState() 可额外设置 title 属性供后续使用。
    • hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误;history模式下,前端的url必须和实际向后端发起请求的url一致,如果没有对用的路由处理,将返回404错误。

    4、总结

    • hash模式URL上带有#,仅 hash 符号之前的内容会被包含在请求中,如 www.hhh.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
    • hash模式URL上没有#,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 www.hhh.com/user/id。如果后端缺少对 /use/id 的路由处理,将返回 404 错误。
    展开全文
  • Vue路由实现:hash模式 和 history模式hash 模式(Vue-router默认)示例:hash模式优缺点history 模式示例:history 模式的优缺点:传统路由跟前端路由不同 前端路由有两种模式:hash 模式和 history 模式,接下来...

    你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
    《人生果实》经典语录

    前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点。

    Vue官方文档-HTML5 History模式

    为了方便演示,需全局安装 light-server

    yarn global add light-server
    // 或者
    npm -g install light-server
    
    hash与history的区别
     hashhistory
    url显示有#,很Low无#,好看
    回车刷新可以加载到hash值对应页面一般就是404掉了
    支持版本支持低版本浏览器和IE浏览器HTML5新推出的API

    hash 模式(Vue-router默认)

    hash 模式是一种把前端路由的路径用井号 #拼接在真实 URL 后面的模式。
    井号 #后面的路径发生变化时,浏览器并不会重新发起请求,而是会触发 hashchange 事件

    示例:

    我们新建一个 hash.html文件,内容为:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hash</title>
    </head>
    <body>
      <a href="#/a">A页面</a>
      <a href="#/b">B页面</a>
      <div id="app"></div>
    
      <script>
        function render() {
          const app = document.querySelector('#app')
          app.innerHTML = window.location.hash
        }
        window.addEventListener('hashchange', render)
      </script>
    </body>
    </html>
    

    在目录下运行:

    light-server -s .  --port 3000
    

    然后打开 http://localhost:3000/hash.html查看效果。

    在上面的例子中,我们利用 a 标签设置了两个路由导航,把 app 当做视图渲染容器,当切换路由时触发视图容器更新,这其实就是大多数前端框架哈希路由的实现原理。

    hash模式优缺点

    优点

    • 只需要前端配置路由表, 不需要后端的参与
    • 兼容性好, 浏览器都能支持
    • hash值改变不会向后端发送请求, 完全属于前端路由

    缺点

    • hash值前面需要加#, 不符合url规范,也不美观

    history 模式

    history API 是 H5 提供的新特性,允许开发者直接更改前端路由,即更新浏览器 URL 地址不重新发起请求(将url替换并且不刷新页面)。

    示例:

    我们新建一个 history.html,内容为:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>history</title>
    </head>
    <body>
      <a href="javascript:toA();">A页面</a>
      <a href="javascript:toB();">B页面</a>
      <div id="app"></div>
      <script>
        function render() {
          console.log('render')
          app.innerHTML = window.location.pathname
        }
        function toA() {
          history.pushState({}, null, '/a')
          render()
        }
        function toB() {
          history.pushState({}, null, '/b')
          render()
        }
        window.addEventListener('popstate', render)
      </script>
    </body>
    </html>
    

    在目录下运行:

    light-server -s . --historyindex '/history.html' --port 3000
    

    然后打开 http://localhost:3000/history.html查看效果。

    history API 提供了丰富的函数供开发者调用,我们不妨把控制台打开,然后输入下面的语句来观察浏览器地址栏的变化:

    history.replaceState({}, null, '/b') // 替换路由
    history.pushState({}, null, '/a') // 路由压栈 替换当前地址 被替换地址进入访问历史
    history.back() // 返回
    history.forward() // 前进
    history.go(-2) // 后退2次
    

    上面的代码监听了 popstate 事件,该事件能监听到

    • 用户点击浏览器的前进和后退操作
    • 手动调用 history 的 backforwardgo方法

    监听不到

    • history 的 pushStatereplaceState方法

    这也是为什么上面的 toA 和 toB 函数内部需要手动调用 render 方法的原因。
    另外,大家可能也注意到 light-server 的命令多了 --historyindex '/history.html'参数,这是干什么的呢?

    浏览器在刷新的时候,会按照路径发送真实的资源请求,如果这个路径是前端通过 history API 设置的 URL,那么在服务端往往不存在这个资源,于是就返回 404了。
    上面的参数的意思就是如果后端资源不存在就返回 history.html 的内容。(试了没反应,知道有这种用法即可)

    因此在线上部署基于 history API单页面应用的时候,一定要后端配合支持才行,否则会出现大量的 404
    以最常用的 Nginx 为例,只需要在配置的 location / 中增加下面一行即可:

    try_files $uri /index.html
    

    history 模式的优缺点:

    优点:

    • 符合url地址规范, 不需要#, 使用起来比较美观

    缺点:

    • 兼容性不如 hash,且需要服务端支持重定向,否则一刷新页面就404了
    • 兼容性比较差, 利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

    传统路由跟前端路由不同

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

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

    Vue源码学习目录

    点击回到 Vue源码学习完整目录


    谢谢你阅读到了最后~
    期待你关注、收藏、评论、点赞~
    让我们一起 变得更强

    展开全文
  • 1.直观区别: hash模式url带#号,history模式不带#号。 2.深层区别: ...功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的, 咱们把这个页面分享到第三方

    转自:https://www.cnblogs.com/lbcxq/p/12036788.html

    1.直观区别:

    hash模式url带#号,history模式不带#号。
    

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求

    为了达到这一目的,浏览器当前提供了以下两种支持:

    hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。
    比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
    history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
    这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
    因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

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

    如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成
    URL 跳转而无须重新加载页面。—— Vue-router 官网。

    另外,根据 Mozilla Develop Network 的介绍,调用 history.pushState() 相比于直接修改 hash,存在以下优势:

    pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;
    pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;
    pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串;
    pushState() 可额外设置 title 属性供后续使用。
    当然啦,history 也不是样样都好。SPA 虽然在浏览器里游刃有余,但真要通过 URL 向后端发起 HTTP 请求时,两者的差异就来了。尤其在用户手动输入 URL 后回车,或者刷新(重启)浏览器的时候。

    hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
    history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

    history模式怕啥
    通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
    不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。

    在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

    小结
    结合自身例子,对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景,用 history 模式即可,只需在后端(Apache 或 Nginx)进行简单的路由配置,同时搭配前端路由的 404 页面支持。
    ————————————————
    版权声明:本文为CSDN博主「麦兜_冰夕」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/lyn1772671980/article/details/80804419

    2.深层区别:
    hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。
    如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传
    功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的, 咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式
    但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok啦

    路由模式配置:

    export default new Router({
         // mode: 'history',
        mode: 'hash',
         routes
     })
    

    如果是 history模式需要后端配合解决刷新404问题 这里以Node 后台为例:

    const Koa = require('koa')
    const Router = require('koa-router');
    const static = require('koa-static')
    const fs = require('fs');
    const app = new Koa();
    const router = new Router();
    
    let str;
    fs.readFile('../dist/index.html', "utf-8", (err, data) => {
        if (err) {
            ctx.body = "error found"
        }
        str = data.toString();
    })
    
    // 解决vue 路由在 history刷新 404情况
    router.get('*', async(ctx, next) => {
        if (ctx.url !== "/index.html") {
            console.log("在这里返回")
            ctx.body = str;
        }
    })
    
    app.use(static("../dist/"));
    app.use(router.routes()) //启动路由
    app.use(router.allowedMethods());
    
    
    app.listen(8989, () => {
        console.log("监听服务器地址:127.0.0.1:8989");
    })
    
    展开全文
  • vuehash和history的区别

    千次阅读 2021-07-03 00:27:49
    vue路由分为hash和history模式,他俩最直观的区别就是hash路由有一个 # 号,而history是没有的。还有就是: 1. hash支持低版本的浏览器,而history就没有那么友好了 2. (1) hash模式下,它指 # 号之后的所有...
  • 15、Vue路由

    2022-03-20 16:12:56
    1 、Vue路由简介 1、什么是路由 【生活举例】: 设备和ip的映射关系 接口和服务的映射关系 路径和组件的映射关系 2、路由的优缺点 【优点】: 实现业务场景的切换 整体不刷新页面,用户体验良好 数据传递容易...
  • Vue路由

    2021-11-01 15:26:23
    路由概念 路由的本质就是一种对应关系,根据不同的URL请求,返回对应不同的资源。 路由分为:后端路由和前端路由 后端路由:由服务器端进行实现并实现资源映射分发(路由路由之前切换会刷新页面) 前端路由:...
  • vue 项目中,我们比较常用的模式为 hash 和 history 模式 默认情况下,vue 项目采用的就是 hash 模式 有些人对 history 模式下,为什么需要服务器做相应配置,以及如何配置不甚理解,所以这篇文章就对此做出分析,...
  • vue hash模式的缺点

    千次阅读 2017-08-02 14:55:29
    最近碰到的问题。 1. 回退无法回到本来的状态。或者说不方便。 比如,在一个很长的list中,点击某个item去看详情,回退会回到list的顶端。 2. 无法使用锚点进行定位,与原来的路由冲突。
  • Vue路由使用

    2022-03-14 14:32:27
    Vue中的路由是什么? 路径和组件的映射关系 2.路由-为何用 目标 了解为何要学习和使用路由 讲解 目标: 在一个页面里, 切换业务场景 具体使用示例: 网易云音乐 网易云音乐 单页面应用(SPA): 所有...
  • Vue路由和组件库

    2022-03-03 18:29:21
    vue路由 1-什么是路由 --路径与组件之间的关系 2-为什么使用路由---在一个页面中切换业务场景.所有的功能在一个页面上实现,利用路由的功 能实现不切换页面进行局部刷新,实现极高的体验感,开发效率高,数据传递容易,...
  • 随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行。 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记录当前页面的...
  • ⾯试官您好,接下来我给您介绍⼀下 vue路由模式,vue路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端...
  • hash模式 优点 兼容性强,兼容性达到了IE8 除发送ajax和资源请求外不会发送其他多余请求 改变#后的路径、不会自动刷新页面 无需服务端进行配合 缺点 访问路径上包含#,不美观 对于需要锚点功能的需求会与当前...
  • 不知道大家有没有遇到过一种情况,当自己的vue部署在服务器上时,一切都如想象办运转,然后脑袋duang的一下,突然想去刷新,然后网页就duang的一下,白屏了。 不出意外的话,我猜你用的一定是history的路由模式。 没...
  • vue-cli->src>router>index.js> new Router({ mode:'history',//这里是模式设置,就这么简单 //如果部署在二级目录,要写默认地址 base:'/二级目录' }) 这就完成了,是不是不相信这么简单 当然不是...
  • 先创建一个vue-cli2项目,use vue-router 略… 前端渲染 后端渲染 前端路由 后端路由 后端渲染 jsp: (java server page) = html+css+java代码(动态从数据库读取数据) 服务器端已经渲染好了,网页已经渲染好了,...
  • vue路由以及递归

    2020-06-11 23:26:15
    首先来说一下vue递归方法, 对于这个方法的一个简单的理解就是 他可以让复杂的方法简单化。举个简单的运用场景的例子,就是说假如我们做一个树形文件夹,简单点说就是层层嵌套的。那如果我们用for循环来做的话,要写...
  • hash和history的区别 vue路由跳转

    千次阅读 2019-03-20 10:32:56
    一、hash 1. 原理:监听onhashchange事件 2. 当url发生变化时,浏览器会记录下来,因此前进后退按钮都可以使用。需要注意的是hash模式下修改的是#后面的内容,使用url...4.缺点:url比较丑,如果传复杂的数据,会...
  • 1. vue路由简介和基础使用 1.0 什么是路由 路径和组件的映射关系 1.1 为什么使用路由 单页面应用(SPA): 所有功能在一个html页面上实现 前端路由作用: 实现业务场景切换 优点: 整体不刷新页面,用户体验更好 ...
  • vue路由的两种模式

    千次阅读 2020-04-25 21:59:03
    hash与history 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义。前端路由的核心,就在于——— 改变视图的同时不会向后端发出请求。 一、为了...
  • vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求
  • vue路由介绍

    千次阅读 2018-08-12 16:07:47
    前端路由 服务器端路由:的功能是根据URL地址,跳转到相应页面,这些页面都是真实存在于服务端的 前端路由:由前端实现以上功能,前端只存在d单页面首页index.htm ...缺点 ...前端路由的使用 ...vue-router用...
  • vue路由传值主要通过 query 和 params 来实现 方法1、query query传参就是在url地址后面拼接 ?参数名=参数值 优点:通用性比较好,刷新数据不会丢失 例如 rourer-link to=”/goods?id=1001” this.$router.push({...
  • 路由传参 1、单页面应用 app 所有的内容都在一个html页面上显示,内容的切换用路由去实现 多页面应用 由多个html页面组成,页面的之间的转换由a标签实现跳转 单页面应用和多页面应用的优缺点: ...vue路由 src
  • location.hash history.pushState({},"","lala") //可以history.back的相关history的操作 history.replaceState({}."","hehe") //替换,不能返回,不能前进 router-link默认在网页生成a标签, tag设置成想要的标签...
  • vue路由、单页面应用

    2021-07-23 18:10:49
    vue 中的路由 : 是hash 和 component 的对应关系 , 一个哈希值对应一个组件 单页面应用程序 单页面应用的优缺点: 优点: 1、用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作。 2、适合前后端...
  • Vue路由的两种模式

    2021-03-03 15:50:33
    后端路由 1、后端渲染:jsp-java server page 后端编写jsp文件代码,包含html+css+java,java代码的作用是从数据库中读取数据,并且将它动态地放在页面中。当浏览器去请求时,后端会返回已经处理好的完整的页面给...
  • Vue 路由

    2019-10-04 15:10:22
    路由:路:路径(地址) 由:方向 针对于单页面应用,所提供的一个解决方案。根据地址传递的参数,来决定具体要使用的组件。 1、下载(如果已下载该步可以省略) cnpm install vue-router -S 2、引入 import ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,857
精华内容 1,542
关键字:

vue路由hash缺点