vue路由的两种模式,hash与history的区别

1.直观区别:

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

2.深层区别:

hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。

如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传

功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,

咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式

但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok啦。

路由模式配置:

1 export default new Router({
2     // mode: ‘history‘,
3     mode: ‘hash‘,
4     routes
5 })

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

 1 const Koa = require(‘koa‘)
 2 const Router = require(‘koa-router‘);
 3 const static = require(‘koa-static‘)
 4 const fs = require(‘fs‘);
 5 const app = new Koa();
 6 const router = new Router();
 7
 8 let str;
 9 fs.readFile(‘../dist/index.html‘, "utf-8", (err, data) => {
10     if (err) {
11         ctx.body = "error found"
12     }
13     str = data.toString();
14 })
15
16 // 解决vue 路由在 history刷新 404情况
17 router.get(‘*‘, async(ctx, next) => {
18     if (ctx.url !== "/index.html") {
19         console.log("在这里返回")
20         ctx.body = str;
21     }
22 })
23
24 app.use(static("../dist/"));
25 app.use(router.routes()) //启动路由
26 app.use(router.allowedMethods());
27
28
29 app.listen(8989, () => {
30     console.log("监听服务器地址:127.0.0.1:8989");
31 })

原文地址:https://www.cnblogs.com/lbcxq/p/12036788.html

时间: 2024-10-26 08:29:35

vue路由的两种模式,hash与history的区别的相关文章

vue路由的两种模式配置以及history模式下面后端如何配置

vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面.2.history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法.需要特定浏览器支持history模式,会出现404 的情况,需要后台配置.3.hash模式下,仅hash符号之前的内容会被包含在请求

vue路由的两种模式,hash与history

对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义.前端路由的核心,就在于——— 改变视图的同时不会向后端发出请求. 一.为了达到这个目的,浏览器提供了以下两种支持: 1.hash ——即地址栏URL中的#符号(此hsah 不是密码学里的散列运算). 比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello.它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求

前端路由的两种实现

转载自  http://www.jianshu.com/p/c9de1924d215 1.原理浅析 hash模式如果a标签的href属性以"#"开头,那么当点击这个a标签时就会触发hashchange事件,在该事件处理函数中可以做很多事,比如发ajax请求,进行DOM操作替换页面等. history模式hisroty模式相比hash模式,是一种比较新的路由模式,其浏览器兼容性如下: pushState浏览器兼容性 原理就是利用history.pushState(state,null,u

ThinkPHP教程_PHP框架之ThinkPHP(二)【URL路径访问与模块控制器、URL四种模式、PATHINFO的两种模式、模板与控制器之间的关系】

一.URL路径访问与模块控制器 URL 模块(控制器) 动作(方法) 即以上三者之间的关系URL:http://127.0.0.1/projectName/index.php/模块/动作 1.ThinkPHP规定,两点 ·第一.所有的主入口文件默认访问index控制器(模块) ·第二.所有的控制器默认执行index方法(动作) 特别强调一下,以上两点是独立的!也就是说"所有的主入口文件默认访问index控制器,并执行默认执行index方法"是不准确的 那么,http://127.0.0

CentOS7上squid的部署及两种模式(4.1版本)

CentOS7上squid的部署及两种模式(4.1版本) 简介 squid是什么? Squid是一种用来缓冲Internet数据的软件.它接受来自人们需要下载的目标(object)的请求并适当地处理这些请求.也就是说,如果一个人想下载一web页面,他请求Squid为他取得这个页面.Squid随之连接到远程服务器(比如:http://squid.nlanr.net/)并向这个页面发出请求.然后,Squid显式地聚集数据到客户端机器,而且同时复制一份.当下一次有人需要同一页面时,Squid可以简单地

Doctype文档声明的严格模式和混杂模式,如何触发这两种模式,区分它们有何意义?

(1)如何触发两种模式:加入xml头部声明,可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此.          (2)IE6的触发:在XHTML的DOCTYPE前加入XML声明,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD X

第九章 两种模式的比较

#include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include <assert.h> #include <stdio.h> #include <unistd.h> #include <errno.h> #include <string.h> #include

DUI-分层窗口两种模式(SetLayeredWindowAttributes和UpdateLayeredWindow两种方法各有利弊)

LayeredWindow提供两种模式: 1.使用SetLayeredWindowAttributes去设置透明度, 完成窗口的统一透明,此时窗口仍然收到PAINT消息, 其他应用跟普通窗口一样. 2.使用UpdateLayeredWindow方法, 向系统提交包含bitmap的DC, 交由系统统一管理,此时再也收不到paint消息, 任何对窗口的改变,只能通过UpdateLayeredWindow来修改. 如果你不需要针对像素级别的不同透明,只需要使用SetLayeredWindowAttri

如何理解DocType? 什么是严格模式与混杂模式?如何触发这两种模式?

1.Doctype声明位于文档中的最前面的位置,处于标签之前,此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范,该标签可声明三种DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档.2.当浏览器厂商开始创建与标准兼容的浏览器时,为了确保向后兼容性,他们把浏览器的工作模式(渲染模式)分为标准模式和混杂模式.在标准模式中,浏览器根据规范呈现页面:在混杂模式中,页面以一种比较宽松的向后兼容的方式显示,混杂模式通常模拟老式浏览器的行为以防止老站点无法工作.3.如何触发这两