4-2.vue-router的两种模式：hash和history

最新推荐文章于 2023-03-30 17:31:05 发布
最新推荐文章于 2023-03-30 17:31:05 发布
阅读量593 收藏
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660035/article/details/111416448
版权

4-2.vue-router的两种模式：hash和history

vue项目是一个单页面的富应用。就是整个项目只有一个html，通过js来处理相关的事情。在进行页面的交互时，整个页面是不会刷新的。实现该效果就是通过上面的两种方式

hash模式

hash模式是url里面包含#,改变#后面的hash值不会去向服务器发送请求，也就不会刷新整个页面。通过vue-router这个前端路由绑定该hash值和组件,监听hash值得变化去展示不同的组件内容。
测试方式:location.hash = ‘aaa’
在这里插入图片描述
在这里插入图片描述

history模式

history模式是html5标准发布的。他是通过以下三个方法去实现上面和hash一样的效果

  • pushState():向浏览器历史记录栈里面进行入栈操作
  • back():返回浏览器历史记录栈里面上一个入栈操作,与pushState()是配合使用的。其效果是可以前进和后退
  • replaceState();替换当前的url,不进行入栈操作，与pushState(）的区别就是没有返回操作。
效果展示

在这里插入图片描述

在这里插入图片描述

堵车了
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈vue项目4rs vue-router上线后history模式遇到的坑
12-03
此次项目开发完后准备打包，因为hash模式的路径带#看着实在是有点丑，所以采用history模式。因为本次项目属于以前网站重构，但是seo问题，所以需要以前的一些地址路径写，所以vue-router的路径全部重改了。打包后查了网上一大堆，都说要把config里的index.js 里的build里的 assetsPublicPath: ‘/’改成‘./’，打包上线发现在hash模式下是没问题的， 但一旦改成history模式，有些动态js文件的路径都是错的。无奈之下死马当活马医，把‘./’改回了‘/’在history模式 下再次打包上线，发现点击跳转页面都是正常的，有些小激动。但是history
一文了解vue-router之hash模式和history模式
10-16
主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue-Router 4.x填坑
duansamve的博客
11-22 524
查阅Vue-Router 4.x官方文档（Vue Router4.x），你会发现里面讲得很不完善，跳过了很多步骤，如果按照官方文档在项目中使用，你会发现很多地方会报错。这里讲下Vue-Router 4.x的正确使用方式： 1、引入createRouter、createWebHashHistory： import { createRouter, createWebHashHistory } from "vue-router"; /src/router/index.js： import { cre.
vue-router
weixin_49555741的博客
06-12 123
目录1. 概念1.1 vue-router的概念1.2 SPA的概念2. 基本使用2.1 搭配环境和使用2.2 注意点2.3 多级路由（多级路由）2.4 路由query 传参2.5 命名路由2.6 路由的params传参2.6 路由的props配置2.7 的replace属性2.8 编程式路由导航2.9 缓存路由组件 2.10 生命周期的钩子 activated和deactivated3. 路由守卫3.1 全局守卫3.1.1 全局前置守卫3.1.1 全局后置守卫3.2 独享守卫3.3 组件内守卫4. 路由
vue-router@4 使用 -动态路由刷新页面请求（含history模式打包踩坑）
m0_49827178的博客
03-30 2748
添加一个导航守卫，在当前位置的组件将要离开时触发。类似于beforeRouteLeave ，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。当组件被卸载时，导航守卫将被移除。不同：beforeEach是在路由规则循环之前执行，beforeResolve是在组件被解析之后调用。需要注意，页面过渡效果需要在页面当中使用单个的div进行包裹，不然会警告。对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该。在导航确认前被创建，组件还未被创建，还没有this。
使用vue3从0开发一个后台管理系统
SongZhengxing_的博客
10-28 9957
https://gitee.com/szxio/zx-vue-next本项目是使用 vue3 来开发的后台管理系统模板。页面简单大方，使用悬浮式的风格，将菜单栏，顶部面包屑，中间操作区域等合理划分，功能丰富，支持主题颜色自定义，一键开启黑色主题，浅色、深色菜单动态切换等。路由采用动态路由，依托若依后端接口，拥有强大的权限管理功能。对若依感兴趣的点此跳转，希望各位小伙伴能够在学习本项目的过程中或多或少的有所收获。如果感觉对你有所帮助，请点击 Star，感谢支持。本文档同步至以下网站：本项目后端借用了若依的后台
vue-router中的hash和history两种模式的区别
10-18
大家都知道vue-router有两种模式，hash模式和history模式，这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
vue vue-Router默认hash模式修改为history需要做的修改详解
10-18
Vue.js 是一款流行的前端框架，而 Vue Router 是官方推荐的路由管理库，它提供了两种主要的导航解析模式：Hash 模式和 History 模式。本文将详细介绍如何将 Vue Router 的默认 Hash 模式修改为 History 模式，并解决...
官方的js路由router
weixin_40945354的博客
02-09 1055
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
Vue Router的两种模式Hash模式和history模式
weixin_46369590的博客
03-30 949
Vue Router 是 Vue.js 官方的路由管理器，可以轻松地实现单页应用（SPA）的路由功能。hash模式和history模式。
vue项目4rs vue-router上线后history模式遇到的坑
u010276653的专栏
04-04 4386
  此次项目开发完后准备打包，因为hash模式的路径带#看着实在是有点丑，所以采用history模式。因为本次项目属于以前网站重构，但是seo问题，所以需要以前的一些地址路径写，所以vue-router的路径全部重改了。打包后查了网上一大堆，都说要把config里的index.js 里的build里的assetsPublicPath: '/'改成‘./’，打包上线发现在hash模式下是没问题的，但...
Vite+Vue3.0+Vue-Router4.0 采用history 页面刷新白屏问题处理（不用在nginx再进行配置）
小猿同学628的博客
01-11 6930
Vite+Vue3.0+Vue-Router4.0 采用history 页面刷新白屏问题处理（不用在nginx再进行配置）
Vuejs+Webpack部署
Lamar's Blog
11-01 928
使用vuejs+webpack在本地开发的时候很顺利，但在打包部署后子页面不能通过url地址直接访问到，只能通过主页点击前往各子页面
vue-router使用总结
大灰狼的小绵羊哥哥的博客
08-01 1万+
想自己动手搭建一个 Discuz 论坛？试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs 原文链接：https://zhuanlan.zhihu.com/p/28156233 结合官方文档，简洁总结如何正确使用vue-router。 —— 由叶落77分享 首先抛出这样一个问题，vue-router是用来做什么的？
Vue Router
Little___Turtle的博客
07-14 733
vue Router 通俗易懂版
Vue Router 4 快速入门
热门推荐
前端精髓
11-21 1万+
现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。 vue2配合vue-router3代码是这样的。https://router.vuejs.org/zh/guide/#javascript // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>
Vue Router 4 的使用，一篇文章给你讲透彻
lcl130的专栏
02-06 1万+
Vue 3.X 使用Vue Router 4.x 进行路由配置，本文我们就来研究下如何使用Vue Router 4.x，本文中所有的使用方式都是使用 Composition API的方式。 本文通过一步步介绍Vue Router 4.x的使用，来搭建一个简单的博客系统，让你对新版的Vue Router 4.x有一个完整的认识，然后能够非常轻松滴将Vue Router 4.x应用在自己的项目中。 项目初始化 项目搭建 项目使用vite进行创建。 npm init vite@latest vue-router-
Vue3.0+Vue-router4.x+Vue4.x 新特性入门实战
04-07
本课程大喵将带着大家手学习认识 Vue3.0+Vue-Router4.x+Vuex4.x 全家桶开发新特性新知识点，并且会结合小案例对每个新的Vue3.x新知识点做详细的讲解；在讲解过程中，我们会对比Vue2.x的API特性，使用有哪些区别，实现方式有哪些改变，这样对Vue3.x新手同学就更加的清晰易懂。课程中，我们将会以新手入门案例项目实战紧跟课程内容的方式学习本门课程，方便大家能够快速将Vue3.X新技术运用到日常前端项目开发里面去，让大家熟悉并且掌握 Vue3.0+Vue-Router4.x+Vuex4.x 全家桶的项目实战开发，并且能够学会对老Vue2.x项目做技术上的升级迁移；
Vue-router的两种模式
最新发布
05-24
Vue-router有两种模式: 1. 历史模式(History mode): 在这种模式下，Vue-router会使用HTML5的History API来实现URL的跳转。URL的路径看起来像是普通的路径，而不是带有'#'的哈希路径。例如，访问...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值