vue-router及路由相关＜前端学习笔记＞
Vue 路由及异步组件
前端路由 router 原理及表现
背景
路由全部都是由服务端控制的，前端代码和服务端代码过度融合在一起。
客户端/前端发起 http 请求 -> 服务端 -> url 路径去匹配不同的路由/返回不同的数据。
优点：因为直接返回一个 html，渲染了页面结构。SEO 的效果非常好，首屏时间特别快。
在浏览器输入一个 url 开始 < - > 页面任意元素加载出来/渲染出来 => 首屏时间
缺点：前端代码和服务端代码过度融合在一起，开发协同非常的乱。服务器压力大，因为把构建 html 的工作放在的服务端。
Ajax
异步请求，浏览器端异步请求获取所需数据。
单页应用
页 -> html 文件
单页 -> 单个 html 文件。 （以前 user/index.html, foods/index.html）
特点：
- 页面中的交互是不刷新的页面的，比如点击按钮，比如点击出现一个弹窗
- 多个页面间的交互，不需要刷新页面(a/b/c，a-> b -> c); 加载过的公共资源，无需再重复加载。
支撑起单页应用这种特性的是什么？ —前端路由
vue.js 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/detail/1 -> 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 方法
VueRouter
vue-cli 新建了一个 vue 的项目, ts
导航守卫执行顺序
面试题！！！！
- 【组件】前一个组件的 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;
},
});