Vue的路由实现模式：hash模式和history模式

咖啡只喝拿铁~2024-08-03 12:51

1、hash模式：在浏览器中符号"#"， #以及#后面的字符称之为hash，用window.location.hash读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面

javascript 复制代码

import {  createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

2、history模式：history采用HTML5的新特性，且提供了两个新方法：

2.1) pushState()

2.2) replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

javascript 复制代码

import {  createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes
})