Secondary packaging bread crumbs

Url regular expression: path-to-regexp

This tool library is used to deal with the url address and parameters, can be very convenient to get the data we want.

Js has the RegExp method for regular expression verification, and path-to-regexp can be regarded as a url string regular expression.

use

Third party library, install before use:

$ npm install path-to-regexp
Copy the code

Use in js:

**

const pathToRegexp = require('path-to-regexp');
Copy the code

The API is introduced

1. pathToRegexp()

Function: This method is analogous to new RegExp(‘ XXX ‘) in JS.

**

var pathToRegexp = require('path-to-regexp')

var re = pathToRegexp('/foo/:bar')
console.log(re);    
Copy the code

The print result is as follows:

**

/^/foo/((? : [^ /] +)? (?) : /? ) = $)? $/iCopy the code

Note two things, one is our own URL address, one is the matching rule.

2. exec()

Function: Matches whether the URL address matches the rule.

**

var pathToRegexp = require('path-to-regexp') var re = pathToRegexp('/foo/:bar'); Var match1 = re.exec('/test/route'); Var match2 = re.exec('/foo/route'); // url path console.log(match1); console.log(match2);Copy the code

The print result is as follows:

**

null
[ '/foo/route', 'route', index: 0, input: '/foo/route' ]
Copy the code

Description:

In the above code, null is returned for the first url path that does not match the rule, and an array is returned for the second url path that matches the rule.

3. parse()

Parses the parameter part of the URL string (:id).

**

var pathToRegexp = require('path-to-regexp');

var url = '/user/:id';
console.log(pathToRegexp.parse(url));
Copy the code

The print result is as follows:

**

[ '/user', { name: 'id', prefix: '/', delimiter: '/', optional: false, repeat: false, partial: false, pattern: '[^ \ /] +?'}]Copy the code

Description: Return an array, from the second data can be obtained url address with parameters of the property name (item.name).

Of course, the URL takes parameters like id and /user? If id=11, use the parse() method to view the result.

4. compile()

Function: Quickly fills in the parameter values of the URL string.

**

var pathToRegexp = require('path-to-regexp')

var url = '/user/:id/:name'
var data = {id: 10001, name: 'bob'}
console.log(pathToRegexp.compile(url)(data))
Copy the code

Print result:

**

/user/10001/bob
Copy the code
<template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item  v-for="(item,index) in levelList" :key="item.path"> <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> </el-breadcrumb-item> </transition-group> </el-breadcrumb> </template> <script> import pathToRegexp from 'path-to-regexp' export default { data() { return { levelList: null } }, watch: { $route() { this.getBreadcrumb() } }, created() { this.getBreadcrumb() }, methods: { getBreadcrumb() { // only show routes with meta.title let matched = this.$route.matched.filter(item => item.meta && item.meta.title) const first = matched[0] if (! this.isDashboard(first)) { matched = [{ path: '/', meta: { title: Concat (matched)} levelList = matched. Filter (item => item.meta && item.meta item.meta.breadcrumb ! == false) }, isDashboard(route) { console.log(route) const name = route && route.name if (! name) { return false } return name.trim().toLocaleLowerCase() === 'Midea'.toLocaleLowerCase() }, pathCompile(path) { // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 const { params }  = this.$route var toPath = pathToRegexp.compile(path) return toPath(params) }, handleLink(item) { const { redirect, path } = item console.log(item) if (redirect) { this.$router.push(redirect) return } this.$router.push(this.pathCompile(path)) } } } </script> <style lang="scss" scoped> .app-breadcrumb.el-breadcrumb { display: inline-block; font-size: 14px; line-height: 50px; margin-left: 8px; .no-redirect { color: #97a8be; cursor: text; } } </style>Copy the code