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({存点东西},'没啥用的参数','跳转路径'),跳转后不会被浏览器监听到
*/
相关文章
|
9月前
|
缓存 JavaScript
Vue Router 学习 new Router
Vue Router 学习 new Router
85 0
|
1月前
|
缓存 移动开发 JavaScript
【学习笔记】Vue Router
【学习笔记】Vue Router
36 0
|
1月前
|
存储 资源调度 前端开发
React Router v6 完全指南(上)
React Router v6 完全指南(上)
193 0
|
1月前
|
前端开发 JavaScript API
React Router v6 完全指南(下)
React Router v6 完全指南(下)
101 0
|
网络架构
Pinia+Router学习笔记(十)
本节记录Vue-Router的两种路由传参方式
140 0
|
JavaScript
Pinia+Router学习笔记(一)
本系列笔记内容根据B站up主“小满zs”视频教程整理而成,本节记录pinia的搭建过程
122 0
|
JavaScript
Pinia+Router学习笔记(二)
本节记录修改State中值的五种方式
71 0
|
前端开发
Pinia+Router学习笔记(四)
本节记录Pinia中Action和Getters相关知识点
108 0
Pinia+Router学习笔记(三)
本节记录解构Store过程中的相关操作及注意事项
67 0
|
API
Pinia+Router学习笔记(五)
本节记录例API和Pinia持久化插件相关内容
68 0

热门文章

最新文章