vue router中meta元素使用

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(3904)   2024-03-16 09:31:41

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()
})

 

标签: vue router vue
地址:https://www.leftso.com/article/625.html

相关阅读

vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
一、vue-router路由跳转分为两大类编程式的跳转:router.push声明式的跳转:<router-link&gtl;二、编程式的跳转分为三种1、this.$router.push...
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body&gtl;     <di...
一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:va...
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataLis...
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来
普通写法​vantUI 使用字体图标和文字<template&gtl; <van-tabbar v-model="active" active-color="#07c160"&gtl...
1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     retur...