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 相关文章推荐
js的[defer]和[async]属性
Nov 24 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
Vue数字输入框组件的使用方法
Oct 19 Javascript
js表达式与运算符简单操作示例
Feb 15 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/06/29 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
js查找父节点的简单方法
2008/06/28 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
sort命令的作用和用法
2013/08/25 面试题
《我为你骄傲》教学反思
2014/02/20 职场文书
大学生求职信范文
2014/05/24 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
总结Python常用的魔法方法
2021/05/25 Python
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Python机器学习之底层实现KNN
2021/06/20 Python