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 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
小程序实现搜索框
Jun 19 Javascript
vue源码nextTick使用及原理解析
Aug 13 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 OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
js实现全选和全不选
2020/07/28 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python发送邮件功能实现代码
2016/07/15 Python
浅谈Python peewee 使用经验
2017/10/20 Python
想学python 这5本书籍你必看!
2018/12/11 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
使用Pycharm分段执行代码
2020/04/15 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
献爱心倡议书
2014/04/14 职场文书
学校标语口号大全
2015/12/26 职场文书
2019年教师入党申请书
2019/06/27 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers