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
})
相关推荐
你的人类朋友39 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手1 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing3 小时前
前端面试常考题目详解
前端·javascript
中微子4 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10244 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y4 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁4 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js