美文网首页
vue 中路由meta

vue 中路由meta

作者: 陌紫嫣 | 来源:发表于2018-08-08 19:33 被阅读0次

meta字段(元数据)
直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了

{
  path: '/actile',
  name: 'Actile',
  component: Actile,
  meta: {
    login_require: false
  },
},
{
  path: '/goodslist',
  name: 'goodslist',
  component: Goodslist,
  meta: {
    login_require: true
  },
  children:[
    {
      path: 'online',
      component: GoodslistOnline
    }
  ]
}

这里我们只需要判断item下面的meta对象中的login_require是不是true,就可以做一些限制了

router.beforeEach((to, from, next) => {
  if (to.matched.some(function (item) {
    return item.meta.login_require
  })) {
    next('/login')
  } else 
    next()
})

原文章转载:https://blog.csdn.net/cofecode/article/details/79181894

相关文章

  • 路由配置及动态传参

    一、路由配置 1、安装vue-router:npm install vue-router 2、meta可以设置属性...

  • vue3+vite自动加载路由

    1、使用 import.meta.glob加载所有vue文件 2、使用addRoute挂载动态路由 3、路由配置

  • vue动态title

    我的解决方式利用vue-router的meta属性加上vue的路由守卫beforeEach配置动态title ro...

  • vue 中路由meta

    meta字段(元数据)直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状...

  • 禁止手机页面回退

    js. vue.1.在路由配置中添加一个meta信息如:allowBack:false 2.在vuex中设置一个变...

  • vue-meta使用方法

    vue-meta使用方法 本文介绍Vue3中vue-meta的使用方法 meta标签用于设置HTML的元数据(描述...

  • 2019-07-31 VUE 路由META作用及在路由中添加PR

    vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索...

  • vue中的路由元信息(meta)

    一、官方文档 那么如何访问这个字段meta 呢? 首先,我们称呼routers 配置中的每个路由对象为 路由记录。...

  • Vue-Router进阶

    路由元信息 定义路由的时候可以配置meta字段: 那么如何访问这个meta字段呢?首先,我们称呼routes配置中...

  • vue 中使用 vue-meta-info

    vue-meta-info 使用方法安装 vue-meta-infonpm i vue-meta-info --s...

网友评论

      本文标题:vue 中路由meta

      本文链接:https://www.haomeiwen.com/subject/olrevftx.html