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代码
Sep 17 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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的call_user_func传reference引发的思考
2010/07/23 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
一页面多XMLHttpRequest对象
2007/01/22 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python中如何进行连乘计算
2020/05/28 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
外贸实习生自荐信范文
2013/11/24 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
财务经理岗位职责
2015/01/31 职场文书
大学生军训感言
2015/08/01 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
2016年五一促销广告语
2016/01/28 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL