背景
在讲动态路由之前,先给大家科普一点常识,为什么要把查询参数比如?之后的一定要改写为/path/id 这种的,
原因是爬虫对携带查询参数的内容,会在部分情况下认为参数不完整,或者不可爬取,无法建立完整的网站地图,所形成的索引总数也会减少,所以在路径规划上,我们需要针对一级二级分类一级相应的页面参数比如页数都通过路径的方式拼接到页面地址上。
nuxt是否支持动态路由
按照官方的描述是:未知嵌套深度的动态嵌套路由,文件格式为_.vue ,在官方支持的前提下,剩下的工作就是如何拿到查询参数并解析它了。
官网地址:www.nuxtjs.cn/guide/routi…
解析动态参数,获取到相应信息
因为项目时间紧张,简单的利用了半天的时间按照以下几个点进行了分步解决:
获取到匹配路径之后的剩余参数
params.pathMatch
如何拆分路径为标准的分类数组和页数
其中,路径格式为/parent_id/id/p2,如果没有填写页数,那么最后一级为id
边界条件限制:
- 1 必须最少有一个分类ID
- 2 页数参数必须填写到最后,不填写使用默认的第一页
- 3 页数形成的参数与任何id不重名,格式为pn(n为正整数)
/**
*
* @param string: path
* @returns {ids,id,current}
*/
export const getPathInfo = function (path) {
let current = 1;
if (!path) {
return { ids: [], id: undefined, current: 1 };
}
const ids = path.split("/");
if (!ids|| !ids.length) {
return { ids: [], id: undefined, current: 1 };
}
let pageReg = /^p[0-9]+$/;
if (pageReg.test(ids[ids.length - 1])) {
const currentStr = ids[ids.length - 1].replace('p', '');
const parseCurrent = parseInt(currentStr);
current = parseCurrent > 0 ?parseCurrent : 1
return { ids:ids.slice(0,ids.length-1), id: ids[0, ids.length - 2], current };
}
return { ids, id: ids[ids.length - 1], current: 1 };
};
复制代码
小结
本文共分享了3个点,1 为什么要做网页路径的重新规划 2 规划之后的分类页的参数设计 3 规划之后相应的参数如何解析,得到一个标准化的数据格式。
在后续将会持续分享有关网站结构优化的相关内容,具体到落地的哦。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END