Pinia+Router学习笔记(七)

简介: 本节介绍Vue-Router的两种路由模式

路由模式分为两种:hash和history

  1. hash模式:较为传统的模式,特点是URL中存在锚部分(#),#后面的内容不会被作为参数传给服务器,作用于前端路由。如果在控制台中修改location.hash,页面上也会出现实时跳转。hash模式最大的特点是改变URL中的hash部分(锚点以后的部分)不会引起页面刷新
window.addEventListener('hashchange',(e)=>{
  console.log(e)
  // 哈希原理:通过监听hashchange可以看到HashChangeEvent事件
})
  1. history模式:没有#号,对SEO友好,但发布上线后如果不使用中间件或其他方法处理,点击返回按钮将出现404。其底层是popstate事件
window.addEventListener('popstate',(e)=>{
  console.log(e)
})
/*
    通过此属性得到的是PopStateEvent,事件参数e中有back(返回路径)、current(当前页面)、forward(上一个页面)等信息
  监听跳转:通过history.pushState({存点东西},'没啥用的参数','跳转路径'),跳转后不会被浏览器监听到
*/
相关文章
MySQL8.0新特性之公用表表达式学习
公用表表达式(或通用表表达式)简称为CTE(Common Table Expressions)。CTE是一个命名的临时结果集,作用范围是当前语句。CTE可以理解成一个可以复用的子查询,当然跟子查询还是有点区别的,CTE可以引用其他CTE,但子查询不能引用其他子查询。所以,可以考虑代替子查询。
278 0
|
6月前
|
安全 Linux 测试技术
对鸿蒙 Next 系统“成熟论”的深度剖析-优雅草卓伊凡
对鸿蒙 Next 系统“成熟论”的深度剖析-优雅草卓伊凡
133 10
对鸿蒙 Next 系统“成熟论”的深度剖析-优雅草卓伊凡
|
监控 安全 网络协议
MITM攻击以及如何预防?
【8月更文挑战第31天】
271 1
|
7月前
|
自然语言处理 数据处理 开发者
|
前端开发 搜索推荐 UED
探索CSS中的cursor鼠标属性
探索CSS中的cursor鼠标属性
219 5
|
数据采集 监控 搜索推荐
使用 Python 爬虫进行网站流量分析:Referer 头的利用
使用 Python 爬虫进行网站流量分析:Referer 头的利用
|
算法 数据可视化 API
使用PyOD进行异常值检测
异常值检测各个领域的关键任务之一。PyOD是Python Outlier Detection的缩写,可以简化多变量数据集中识别异常值的过程。在本文中,我们将介绍PyOD包,并通过实际给出详细的代码示例
241 0
|
存储 Java easyexcel
导出导入开发场景
导出导入开发场景
175 0
|
存储 定位技术 Python
Python中ArcPy实现栅格图像文件由HDF格式批量转换为TIFF格式
Python中ArcPy实现栅格图像文件由HDF格式批量转换为TIFF格式
179 1
|
测试技术 Go
gRPC源码分析(四):剖析Proto序列化
首先,针对读源码是先看源代码还是测试代码,因人而异。个人建议在对源码毫无头绪时,先从测试入手,了解大致功能;如果有一定基础,那么也可以直接入手源代码。我认为优秀的Go源码可读性是非常高的,所以一般情况下,我都直接从源文件入手,遇到问题才会去对应的测试里阅读。
234 1