背景
在讲动态路由之前,先给大家科普一点常识,为什么要把查询参数比如?之后的一定要改写为/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 规划之后相应的参数如何解析,得到一个标准化的数据格式。
在后续将会持续分享有关网站结构优化的相关内容,具体到落地的哦。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!