vue 路由meta 设置导航隐藏与显示功能的示例代码


Posted in Javascript onSeptember 04, 2020

vue 路由meta 设置title 导航隐藏,具体代码如下所示:

router.js

routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        title: "HelloWorld",  要现实的title
        show: true        设置导航隐藏显示
      }

    }]

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <bottom v-show="this.$route.meta.show"></bottom>  this.$route.meta.show 显示或隐藏
  </div> 
</template>

main.js

router.beforeEach((to, from, next) => {
 
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})<br><br>监听路由 写入 title

PS:vue 中路由meta

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 路由meta 设置导航隐藏与显示功能的示例代码的文章就介绍到这了,更多相关vue 路由meta 设置导航隐藏与显示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
DHTML Slide Show script图片轮换
Mar 03 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
JavaScript中的执行环境和作用域链
Sep 04 #Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 #Javascript
详解JavaScript数据类型和判断方法
Sep 04 #Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 #Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 #Javascript
我所理解的JavaScript中的this指向
Sep 04 #Javascript
JS运算符优先级与表达式示例详解
Sep 04 #Javascript
You might like
PHP教程 基本语法
2009/10/23 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
Python入门篇之文件
2014/10/20 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
应届毕业生个人自我评价
2013/09/20 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
解除同居协议书
2015/01/29 职场文书
2015年财政局工作总结
2015/05/21 职场文书
代理词怎么写
2015/05/25 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Python音乐爬虫完美绕过反爬
2021/08/30 Python
sql注入报错之注入原理实例解析
2022/06/10 MySQL