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

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
})
相关推荐
生擒小朵拉4 分钟前
STM32添加库函数
java·javascript·stm32
还有多远.1 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
w2sfot1 小时前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴2 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
前端Hardy2 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy2 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙2 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
半花3 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
我的名字帅不帅3 小时前
使用 Element UI -Container 布局容器时监听屏幕滚动无效
vue.js
用户28003832908403 小时前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js