前言

前端路由 router 原理及表现

vue -> hash, history react -> hash, history

页面间的交互不刷新页面
不同 Url 会渲染不同的内容

面试！！ Hash 和 History

hash 有#,history 没有
hash 的#部分内容不会给服务端， history 的所有内容都会给服务端
hash 通过 hashchange 监听变化，history 通过 popstate 监听变化

Hash

特性

url 中带有一个#符号，但是#只是浏览器端/客户端的状态，不会传递给服务端。

www.baidu.com/#/user -> http -> www.baidu.com/ www.baidu.com/#/list/deta… -> http -> www.baidu.com/

hash 值的更改，不会导致页面的刷新

location.hash = '#aaa'; location.hash = '#bbb'; 从#aaa 到#bbb，页面是不会刷新的

hash 值的更改，会在浏览器的访问历史中添加一条记录。所以我们才可以通过浏览器的返回、前进按钮来控制 hash 的切换
hash 值的更改，会触发 hashchange 事件 location.hash = '#aaa'; location.hash = '#bbb';

window.addEventLisenter('hashchange', () => {})

如何更改 hash

location.hash

location.hash = '#aaa'; location.hash = '#bbb';

html 标签的方式

点击跳转到 user

location.hash = '#user';

History

hash 有个#符号，不美观，服务端无法接受到 hash 路径和参数

html5 history

window.history.back(); // 后退
window.history.forward(); // 前进
window.history.go(-3); // 接收number参数，后退三个页面
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

pushState/replaceState 的参数

state, 是一个对象，是一个与指定网址相关的对象，当 popstate 事件触发的时候，该对象会传入回调函数
title, 新页面的标题，浏览器支持不一，null
url, 页面的新地址

pushState, 页面的浏览记录里添加一个历史记录 replaceState, 替换当前历史记录

History 的特性

！！面试题 pushState 时，会触发 popstate 吗？

没有#
pushState/replaceState 并不会触发 popstate 事件，这时我们需要手动触发页面的重新渲染。
我们可以使用 popstate 来监听 url 的变化
popstate 到底什么时候才能触发。 4.1 点击浏览器后退按钮 4.2 点击浏览器前进按钮 4.3 js 调用 back 方法 4.4 js 调用 forward 方法 4.5 js 调用 go 方法

vue 导航守卫执行顺序

【组件】前一个组件的 beforRouteLeave
【全局】的 router.beforeEach (3). 【组件】如果是路由参数变化，触发 beforeRouteUpdate
【配置文件】里, 下一个的 beforeEnter
【组件】内部声明的 beforeRouteEnter
【全局】的 router.afterEach

vue-router 里面，怎么记住前一个页面的滚动条的位置。

滚动到了{ top: 100 } list -> detail -> list

scrollBehavior 生效的条件

浏览器支持 history api
页面间的交互是通过 go, forward, back 或者浏览器的前进/返回按钮

// 1. 记住：手动点击浏览器返回或者前进按钮 ，基于history，go,back,forward
// 2. 没记住：router-link，

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior: (to, from, savedPosition) => {
    console.log(savedPosition); // 已报错的位置信息
    return savedPosition;
  },
});

「欢迎在评论区讨论」

前端路由

前言