this.$route.matched.filter(item => item.meta && item.meta.title)作用
时间: 2023-06-17 14:04:12 浏览: 76
这段代码是在 Vue.js 中用于获取当前路由的标题。其中,`$route` 是 Vue Router 中的一个属性,表示当前路由信息。`.matched` 表示当前路由匹配到的所有嵌套路径的数组,因为一个路由可以匹配多个嵌套路径。`filter` 是数组的方法,用于过滤出符合条件的元素,这里的条件是元素必须包含 `meta` 属性并且 `meta` 属性中包含 `title` 属性。最后返回的是一个过滤后的数组,数组中的元素就是每个匹配到的路由的标题。
相关问题
let matchedArr = this.$route.matched.filter((item)=>{ return item.meta.showInbreadcrumb} );
这段代码使用了 Vue.js 中 $route 对象中的 matched 数组,该数组包含了当前路由匹配到的所有路由记录。通过 filter 方法筛选出那些需要在面包屑导航中显示的路由记录,并将筛选结果赋值给 matchedArr 变量。其中,item.meta.showInbreadcrumb 是自定义的路由元信息属性,用于控制该路由是否需要在面包屑导航中显示。该代码的作用是根据路由元信息的设置,获取需要在面包屑导航中显示的路由记录,以便后续生成面包屑导航。
mounted() { this.breadcrumbList = this.$route.matched.filter( (route) => route.meta.breadcrumb ).map( (route) => ({ name: route.meta.breadcrumb, path: route.path, }) ); },
这段代码是获取当前页面路由对应的路由记录,并根据路由记录的`meta.breadcrumb`属性来生成面包屑导航项。具体解释如下:
1. `this.$route`表示当前路由对象,`this.$route.matched`表示当前页面路由所匹配到的所有路由记录的数组。
2. `filter()`方法用于对数组进行筛选,它接收一个回调函数作为参数,并返回一个新的数组,新数组中包含回调函数返回`true`的元素。在这里,我们使用`filter()`方法来筛选出所有带有`meta.breadcrumb`属性的路由记录。
3. `map()`方法用于对数组中的每个元素进行处理,并将处理结果存入一个新数组中。在这里,我们使用`map()`方法来将筛选出的路由记录转换为面包屑导航项,每个面包屑导航项包含两个属性:`name`和`path`,分别表示面包屑导航项的名称和跳转链接。
4. 最后将生成的面包屑导航项数组赋值给`breadcrumbList`数组,用于在模板中动态生成面包屑导航。