2021SC@SDUSC
概述
本周分析amis
关于路由处理的部分。在多页面跳转时或是在组件之间相互调用的过程中,经常会有对前往的 url 的不同表示方法的问题,相对路径与绝对路径经常性的混淆,导致路由配置花费过多的时间。而amis
中,将所有的关于 url 变化的操作统一封装成一个功能函数,标准化规范化,值得学习。
规范化
URL的组成
形如:
https://zcy.fit/2021/07/12/Vue?m=1715614103#v-bind
在以上的URL格式中大致可以分成三部分:
- pathname :
https://zcy.fit/2021/07/12/Vue
用于定位网页 - search:
?m=1715614103
用于 get 传参 - hash:
#v-bind
用于网页内定位
这是一个完整的 URL 所包含的东西,但 search | hash 或缺
相对|绝对 路径
绝对路径: 相对于根目录的路径
/root/index.js
相对路径: 相对于此文件位置的路径
../../etc/index.js
函数实现
将 url 标准格式化
// to : 目标 url
// location : 默认 window.location 对象 (不一定是此刻的 location 对象),使用其中的 baseURL
export const normalizeLink = (to: string, location = window.location) => {
to = to || '';
// 没有 pathname 部分时,以 ? | # 直接开头,补充 pathname