Element-ui二次封装面包屑__前端__Vue.js
发布于 18 天前 作者 banyungong 168 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

二次封装面包屑

url 的正则表达式:path-to-regexp

该工具库用来处理 url 中地址与参数,能够很方便得到我们想要的数据。

js 中有 RegExp 方法做正则表达式校验,而 path-to-regexp 可以看成是 url 字符串的正则表达式。

使用

第三方库,使用前先进行安装:

$ npm install path-to-regexp

在 js 中使用:

**

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

API 介绍

1. pathToRegexp()

作用:这里这个方法可以类比于 js 中 new RegExp('xxx')

**

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

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

打印结果如下:

**

/^/foo/((?:[^/]+?))(?:/(?=$))?$/i

要注意两点,一点是我们自己的 url 地址,一条是匹配规则。

2. exec()

作用:匹配 url 地址与规则是否相符。

**

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

var re = pathToRegexp('/foo/:bar');     // 匹配规则
var match1 = re.exec('/test/route');    // url 路径
var match2 = re.exec('/foo/route');     // url 路径

console.log(match1);
console.log(match2);

打印结果如下:

**

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

说明:

上述代码中,第一个 url 路径与匹配规则不相符返回 null,第二个 url 路径与匹配规则相符,返回一个数组。

3. parse()

作用:解析 url 字符串中的参数部分(:id)。

**

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

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

打印结果如下:

**

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

说明:返回一个数组,从第二个数据可以就可以得到 url 地址携带参数的属性名称(item.name)。

当然,url 中携带参数出了 :id 这种形式,还有 /user?id=11 这种,使用 parse() 方法解析自行查看结果。

4. compile()

作用:快速填充 url 字符串的参数值。

**

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

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

打印结果:

**

/user/10001/bob
<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)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && 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>

```<p style="line-height: 20px; color: #ccc">
        版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
        作者: MK麦客
        原文链接:<a href='https://juejin.im/post/7012514545713446942'>https://juejin.im/post/7012514545713446942</a>
      </p>
回到顶部