},//面包屑数据breadcrumb(){//根据路由配置meta中的showInbreadcrumb字段过滤let matchedArr =this.$route.matched.filter((item)=>{returnitem.meta.showInbreadcrumb} );//因为首页比较特殊,必须一直显示在面包屑第一个,如果没有首页路由信息,手动添加到最前面if(matc
resolve根据传入的location进行路由匹配,找到对应的matcher的路由信息。方法接收一个location和currentLocation参数,返回一个MatcherLocation类型的对象,该对象的属性包含:name、path、params、matched、meta。 function resolve( location: Readonly<MatcherLocationRaw>, currentLocation: Readonly<MatcherLocation> ): MatcherLoc...
这里的to就是上面讲的参数 to， to.matched 是一个对象数组，里面有to指向路由的相关信息，例如：path，name，meta 等等。我们用该数组调用 some() 方法根据返回值 true 或者 false 来进行判断，所以我们要在 router.js 路由配置文件中为我们需要验证登录判断跳转的路由添加一个字段来作为判断条件 { path: '/...
resolve根据传入的location进行路由匹配,找到对应的matcher的路由信息。方法接收一个location和currentLocation参数,返回一个MatcherLocation类型的对象,该对象的属性包含:name、path、params、matched、meta。 function resolve( location: Readonly<MatcherLocationRaw>, currentLocation: Readonly<MatcherLocation> ): MatcherLoc...
这里我要稍微说一下$router.matched属性,它是一个包含性的匹配,它会将嵌套它的父路由都匹配出来。 例如,/home/news/detail/:id这条路径,它包含3条匹配的路由: /home/news/detail/:id /home/news /home 另外,带有v-link指令的元素,如果v-link对应的 URL 匹配当前的路径,该元素会被添加特定的class,该class...
$route.matched — 数组 — 路由匹配到的所有已定义的路由会存入 $route.matched 数组中,包含定义路由时的嵌套路由数组children 使用范例:在全局导航守卫中检查元字段 router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {// this route requires auth, check...
index.js 然后在下面调用beforeEach方法(前置守卫),当我们的路由从一个跳转到另一个时就会调用这个函数,在跳转前回调.导航守卫中的导航表示路由正在发生改变 因为如果像首页那种有嵌套路由的情况直接取meta就是空的,所以在matched中查找 为什么使用导航守卫:
总结一下,createRouterMatcher方法,为每一个routres执行了addRoute方法,调用了insertMatcher,将生成的matchers插入到容器中,后边在调用的时候,通过resolve方法,将记录匹配到到Matcher.record记录保存到MatcherLocation的matched数组中,后续router-view会根据depth从数组取应该要渲染的元素。 push方法执行流程: function push(...
一个路由匹配到的所有路由记录会暴露为$route对象 (还有在导航守卫中的路由对象) 的$route.matched数组。因此,我们需要遍历$route.matched来检查路由记录中的meta字段。 下面例子展示在全局导航守卫中检查元字段: router.beforeEach((to, from, next) => { ...
基于vue-router的matched实现面包屑功能 如上图所示,就是常见的面包屑效果,面包屑的内容一般来说,具有一定的层级关系,就以上图为例,首先是进入首页,然后点击左侧导航,进入活动管理下的活动列表页面,然后点击某一条数据,进入活动详情页面 这正好与vue-router的mached属性所获取的结果有着相似的原理,所以可以基于此来...