zoukankan      html  css  js  c++  java
  • vue路由模式 hash history

    路由模式

    前端路由的核心,就在于 ——— 改变视图的同时不会向后端发出请求。

    路由有两种模式:hashhistory,默认会使用hash模式,在new VueRouter的时候配置mode值可以改变路由模式

    //创建Router的实例对象
    const router = new Router({
        mode:"hash",
        routes
    })
    hash模式

    即地址栏url中的#符号,hash的变化不会导致浏览器向服务器发出请求,对后端完全没有影响,改变hash不会重新加载页面。而且hash改变会触发hashchange事件(hashchange只能改变url#后面的部分),最重要的一点,因为hash发生变化的url都会被浏览器记录下来,所以浏览器的前进后退都可以用

    hash模式背后原理: 其实就是调用了window.onhashchange方法 hash值的切换

    history模式

    因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

    通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

    history 模式改变 url 的方式会导致浏览器向服务器发送请求,这不是我们想看到的,我们需要在服务器端做处理:如果匹配不任何静态资源,则应该始终返回同一个 html 页面。

    history api提供了三个方法

    history.go(-2);//后退两次
    history.go(2);//前进两次
    history.back(); //后退
    hsitory.forward(); //前进

    history模式的原理: 本质使用H5的histroy.pushState方法来更改url

    hash模式和history模式的区别

    • hash模式较丑,history模式较优雅
    • hash兼容IE8以上,history兼容IE10以上
    • history模式需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致404错误
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    Entity Framework Code First 学习日记(1)精
    敏捷宣言
    VS2013中web项目中自动生成的ASP.NET Identity代码思考
    ReSharper 配置及用法
    MVC中的Repository模式
    关于Repository模式
    Entity Framework 学习总结之十一:POCO
    Linux Centos7 离线安装docker 【官网翻译和注释】
    企业服务总线ESB
    面向服务的架构SOA
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617689.html
Copyright © 2011-2022 走看看