resolve根据传入的location进行路由匹配,找到对应的matcher的路由信息。方法接收一个location和currentLocation参数,返回一个MatcherLocation类型的对象,该对象的属性包含:name、path、params、matched、meta。 function resolve( location: Readonly<MatcherLocationRaw>, currentLocation: Readonly<MatcherLocation> ): MatcherLoc...
} const matched: MatcherLocation['matched'] = [] let parentMatcher: RouteRecordMatcher | undefined = matcher while (parentMatcher) { // reversed order so parents are at the beginning matched.unshift(parentMatcher.record) parentMatcher = parentMatcher.parent } return { name, path, params, match...
},computed:{// 侧边导航数据routes(){// 从$router.options中获取所有路由信息并过滤returnthis.$router.options.routes.filter((item)=>{returnitem.meta.showInbreadcrumb}); },// 面包屑数据breadcrumb(){// 根据路由配置meta中的showInbreadcrumb字段过滤letmatchedArr =this.$route.matched.filter((item)=...
},//面包屑数据breadcrumb(){//根据路由配置meta中的showInbreadcrumb字段过滤let matchedArr =this.$route.matched.filter((item)=>{returnitem.meta.showInbreadcrumb} );//因为首页比较特殊,必须一直显示在面包屑第一个,如果没有首页路由信息,手动添加到最前面if(matchedArr[0].meta.title !=='首页'){ matc...
matched顾名思义 就是 匹配,假如我们目前的路由是/a/aa-01,那么此时this.$route.matched匹配到的会是一个数组,包含'/','/a','/a/aa-01',这三个path的路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。 //demo<template><router-link v-for="(item, index) in navList":key="index">{...
基于vue-router的matched实现面包屑功能 如上图所示,就是常见的面包屑效果,面包屑的内容一般来说,具有一定的层级关系,就以上图为例,首先是进入首页,然后点击左侧导航,进入活动管理下的活动列表页面,然后点击某一条数据,进入活动详情页面 这正好与vue-router的mached属性所获取的结果有着相似的原理,所以可以基于此来...
resolve根据传入的location进行路由匹配,找到对应的matcher的路由信息。方法接收一个location和currentLocation参数,返回一个MatcherLocation类型的对象,该对象的属性包含:name、path、params、matched、meta。 removeRoute删除路由 删除路由。接收一个matcherRef参数,removeRoute会将matcherRef对应的matcher从matcherMap和matchers中...
这里我要稍微说一下$router.matched属性,它是一个包含性的匹配,它会将嵌套它的父路由都匹配出来。 例如,/home/news/detail/:id这条路径,它包含3条匹配的路由: /home/news/detail/:id /home/news /home 另外,带有 v-link 指令的元素,如果 v-link...
$route.matched 类型: Array<RouteRecord> 一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。 当URL 为 /foo/bar,$route.matched 将会是一个包含从上到下的所有对象 (副本)。
matched属性 在VueRouter中,所有的Route 最终都是通过 createRoute 函数创建,并且它最后是不可以被外部修改的。 Route对象中有一个重要属性 matched,它通过 formatMatch(record) 计算得到: functionformatMatch(record: ?RouteRecord): Array<RouteRecord> {constres = []while(record) { ...