Vue路由对象属性 .meta $route.matched详解

 更新时间:2019年11月04日 15:19:44   作者:StormBUG  
今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

$route.fullPath

1 路由是:/path/:type真正路径是:/path/list

2 path匹配路径: /path/list

3 fullPath匹配路由: /path/:type

路由元信息 .meta

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存,单页面切换
    }
   ]
  }
 ]
})

先理解什么是路由记录 : 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

上方代码中的路由记录见下方:

  //一级路由 
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存,单页面切换
    }
   ]
  }
 
 
//一级路由的子路由
 
  { path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }
 
 
//两者都是  路由记录

1 定义路由的时候可以配置 meta 字段

2 根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录

3 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。

4 检查路由记录中的 meta 字段 ,我们需要遍历 $route.matched

$route.matched

1 一个数组,包含当前路由的所有嵌套路径片段的路由记录

2 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组

路由元信息 .meta $route.matched 搭配路由守卫 进行验证

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})

以上这篇Vue路由对象属性 .meta $route.matched详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue cli3 项目中如何使用axios发送post请求

    vue cli3 项目中如何使用axios发送post请求

    这篇文章主要介绍了vue cli3 项目中如何使用axios发送post请求,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中组件的过渡动画及实现代码

    vue中组件的过渡动画及实现代码

    这篇文章主要介绍了vue中组件的过渡动画,并通过实例代码给大家介绍了过渡动画的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    本文通过实例代码给大家详细介绍了vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper的相关知识,需要的朋友可以参考下
    2018-05-05
  • 浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    小编最近为了优化vue项目性能,需要使用webpack-bundle-analyzer插件来分析报文件,在网上没有找到合适的,下面小编给大家写出来一个供大家参考
    2019-10-10
  • vue中轮训器的使用

    vue中轮训器的使用

    今天小编就为大家分享一篇关于vue中轮训器的使用,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue.js实现选项卡切换

    vue.js实现选项卡切换

    这篇文章主要为大家详细介绍了vue.js实现选项卡切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue实现原理this.$message实例详解

    vue实现原理this.$message实例详解

    这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • vue中用js如何实现循环可编辑表格

    vue中用js如何实现循环可编辑表格

    这篇文章主要介绍了vue中用js如何实现循环可编辑表格,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue引入Stylus知识点总结

    Vue引入Stylus知识点总结

    在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容,有需要的朋友们可以学习参考下。
    2020-01-01
  • Vue3 使用Element Plus表格单选带checkbox功能

    Vue3 使用Element Plus表格单选带checkbox功能

    这篇文章主要介绍了Vue3 使用Element Plus表格单选带checkbox,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11

最新评论