文档章节

Vue-router中hash与history的区别

他城之途
 他城之途
发布于 01/08 19:06
字数 460
阅读 102
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

Vue为了构建 SPA, 需要引入前端路由系统Vue-Router。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求

为了达到这一目的,利用浏览器的特性, Vue-Router提供了以下两种路由模式:

  • hash —— 即地址栏 URL 中的 # 符号

比如这个 URL:http://www.test.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

  • history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

hash与history的明显区别

  hash history
url显示 有#,很Low 无#,好看
回车刷新 可以加载到hash值对应页面 一般就是404掉了
支持版本 支持低版本浏览器和IE浏览器 HTML5新推出的API

为了解决history模式下刷新出现的404问题, 后台需要做一些路由支持, 比如当url不匹配时跳转到index.html.  

如果Vue后台部署使用的是Nginx, 可以这样配置

location / {
   try_files $uri $uri/ /index.html;#支持history模式刷新
   root   /www/test/hello/;
   index   index.html;
}

 

© 著作权归作者所有

他城之途

他城之途

粉丝 49
博文 89
码字总数 45782
作品 0
海淀
程序员
私信 提问
vue-router 快速入门

概述 vue-router是vue.js官方的路由插件,vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。在传统的页面应用中,是用一些超链接来实现页面的切换和跳转的。...

Yvonne1004
2018/11/02
0
0
vue番外篇 -- vue-router浅析原理

近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)还是Vue的多页面设计? 这篇文章主要围绕Vue的SPA单页面设计展开。 关于如何展开Vue多页面设计请点击查看。 vue-router是什么?...

DIVI
2018/10/19
0
0
从头开始学习vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

大灰狼的小绵羊哥哥
2018/12/31
0
0
详解vue-router 初始化时做了什么

vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤,然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤: 引入 vue-router: 利用 vue 的插件机制...

peakedness丶
2018/11/20
70
0
07、手把手教Vue--路由「Vue-rouer」

PS:转载请注明出处 作者: TigerChain 地址: https://www.jianshu.com/p/443c6704d8d8 本文出自 TigerChain 简书 手把手教 Vue 系列 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略...

TigerChain
2018/09/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 我的视频网站vip账号和我厚脸皮的朋友们

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Cobbage :分享小海的单曲《衡山路(2016现场版)》: 《衡山路(2016现场版)》- 小海 手机党少年们想听歌,请使劲儿戳(这里) @FalconChe...

小小编辑
33分钟前
4
0
Spring Cloud Alibaba 实战(十二) - Nacos配置管理

> 本章主要内容是:使用Nacos管理配置以及实现配置管理的原因,配置如何管理以及动态刷新和最佳实现总结,最后是Nacos配置刷新原理解读 该技术类似于Spring Cloud Config 1 配置管理的意义 项目...

JavaEdge
今天
8
0
面试官问你编码相关的面试题,把这篇甩给他就完事!

前情回顾:Java中一个字符占两字节 但为什么new String("字").getBytes().length 返回3个字节 今天主要聊一聊: 字节 字符 字符集 编码 字符编码 Java 内码和外码 Unicode 字节 例如 :00001...

gzc426
今天
9
0
写的简单sh脚本2

#!/bin/bashexport LANG="en_US.UTF-8"#chmod +x filename 记得给文件加可执行权限#./vsimstart.sh#启动vsim项目echo "start vism"#207------------------------------assets=vsim-a......

hexiaoming123
昨天
6
0
java基础(1)变量和常量

概要和总结: 数据类型图: 基本数据类型:只有基本功能-----保存数据 (4类8种)byte-short-int-long-float-double-char-boolean 引用数据类型:有更多功能,保存数据,处理数据...

煌sir
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部