原文网址：Vue--Router--路由模式--种类/区别/原理_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍Vue Router的三种路由模式，包括原理、优缺点、使用场景。

Router三种路由模式

hash：使用URL的hash值作为路由。
1. Vue的默认路由模式。
2. 支持所有浏览器。
history：使用History API：pushState() 和 replaceState() 方法。
1. HTML5之后支持。
abstract：支持所有 JavaScript 运行环境（包括Node.js 服务器端）
1. 如果发现没有浏览器的 API，路由会自动强制进入这个模式。

官网

HTML5 History 模式 | Vue Router

API 参考 | Vue Router

hash模式

说明

根据MDN：Location 接口的 hash 属性返回一个 USVString，包含URL标识中的 '#' 和后面URL片段标识符，被称为 hash。

例如：http://www.abc.com/#/article，hash 的值为 #/article。

第一个#后的所有字符，都会被浏览器解读为位置标识符，它只用来表示页面位置（一个锚点）。这些字符都不会被发送到服务器端。
单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。
每次改变#后的部分，都会在浏览器的访问历史中增加一个记录。见：此文
window.location.hash 表示 hash 值。此属性可读可写。
使用 window.addEventListener("hashchange", fun) 可以监听 hash 的变化

原理

Vue的Router的hash模式的原理是：使用 window.addEventListener("hashchange", fun) 监听 hash 的变化，hash变化之后，根据这个新的hash找到相应的页面，然后更新视图。

优点

后端不需要额外配置
1. 原因：#及之后的字符不会被发到服务器
2. 例如：http://www.abc.com/#/article在Vue Router中有对应的路由，而我直接输入了http://www.abc.com/#/article/id，Vue Router中没有对应路由。
  1. 此时并不会报错。
  2. 原因：只有http://www.abc.com会被发送到服务器。

缺点

不美观（url中带了个“#”）

history模式

说明

window.history 提供了两类API：

跳到某个浏览记录：back(), forward(), go(),
添加/修改历史记录：pushState(), replaceState()

这些方法都只修改当前url，不会向后端发起请求。

原理

Vue监听url改变这个事件：window.addEventListener('popstate', fun);
Vue在切换页面时，使用pushState(), replaceState()来修改当前的url
切换页面之后，popstate事件被触发，调用相应的回调函数更新视图

优点

美观（url中不带“#”）

缺点

后端需要额外配置
1. 原因：当直接访问一个url时会请求后端。例如：刷新页面、直接通过url访问
2. 例如：http://www.abc.com/article在Vue Router中有对应的路由，而我直接输入了http://www.abc.com/article/id，Vue Router中没有对应路由。
  1. 此时会报错：404。
  2. 原因：后端没有相应的接口。
3. 解决方案：
  1. 后端（Apache 或 Nginx）进行简单的路由配置
  2. Vue配置路由的 404 页面。例如：
    1. ```
    const router = new Router({mode: 'history',routes: [{ path: '*', component: NotFoundComponent }]
    })
```

abstract模式

说明

abstract 模式针对的是没有浏览器环境的情况。

比如 Weex 客户端开发，内部是没有浏览器 API 的，那么 Vue-Router 自身会对环境做校验，强制切换到 abstract 模式。

如果在 Vue-Router 的配置项中不写 mode 的值，在浏览器环境下会默认启用 Hash 模式，在移动客户端下使用 abstract 模式。

原理

通过 stack 和 index 2个变量，模拟出浏览器的历史调用记录。

hash和history的区别

项	hash	history
是否有“#”	有	无
是否设置后端	不需要	需要
设置的URL	本文档的url。 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL。	任意同源url。 pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL。
是否添加到历史记录	hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。	pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中。
记录的数据	短字符串。	任意类型的数据。 pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中
是否可设置title	不能。	pushState() 可额外设置 title 属性供后续使用。

模式的切换

以切换为history模式为例。

vue2.0.x 的写法

// vue2.0.x 写法比较简单
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({mode: "history",routes
})

vue3.0x 的写法

// 在最顶部引入createWebHistory
import { createRouter, createWebHistory,  } from 'vue-router'  const routes = [{path: '/',name: 'Home',component: Home},{ .... }
]const router = createRouter({history: createWebHistory(),  // 在调用 createWebHistory() 即可routes
})

使用场景

hash模式

若没特殊需求，用默认的hash模式即可。

history模式

如果想路径中没有#，则选择history模式

abstract模式

如果是非浏览器环境，则用abstract模式。

Vue--Router--路由模式--种类/区别/原理相关推荐

Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
vue-router路由模式的区别和原理
vue-router路由模式一.vue-router前端路由有两种模式,hash模式和history模式 hash模式就是指 url 后面的 # 号以及后面的字符.每次刷新页面时是直接更改 # 后 ...
路由器NAT模式和路由模式的区别
1.信息交换不同路由器NAT模式不进行路由信息交换,路由模式可以进行路由信息的交换. 2.原理不同路由器NAT模式是指内网与外网经过了网络地址转换,它们之间是不进行路由交换的. 路由器的路由模式是 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
vue router 路由跳转方法概述
一.概述使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签使用router- ...

Vue--Router--路由模式--种类/区别/原理

简介