background

Before we talk about dynamic routing, let’s introduce some common knowledge. Why do we need query parameters such as? /path/id,

Reason is the crawler to carry the content of the query parameter, may in some cases that parameter is not complete, or do not climb get unable to build a complete web site map, formed by the index will also reduce the total, so on the path planning, we need to the level of the corresponding page level secondary classification parameters such as the pages are joining together by means of path to the page address.

Whether nuXT supports dynamic routing

The file format is _. Vue. The only thing left to do is to get the query parameters and parse them. Website address: www.nuxtjs.cn/guide/routi…

Dynamic parameters are analyzed and corresponding information is obtained

Due to the tight time of the project, I simply used half a day to solve the problem step by step according to the following points:

The remaining parameters after the matching path are obtained

params.pathMatch

How to split paths into standard classification arrays and page counts

The path format is /parent_id/id/p2. If no page number is specified, the last level is restricted by id boundary conditions:

  • 1 There must be at least one category ID
  • 2 pages must be filled in at the end. If you do not fill in the first page, use the default one
  • 3 The parameter formed by the number of pages has the same name as any ID in the format of PN (n is a positive integer).
/ * * * *@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 };
};
Copy the code

summary

This paper shares three points in total: 1, why to do the re-planning of the web page path; 2, the parameter design of the classification page after the planning; 3, how to analyze the corresponding parameters after the planning and get a standardized data format.

In the follow-up will continue to share the website structure optimization related content, specific to the landing of oh.