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

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 设置导航隐藏与显示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中动态设置meta标签和title标签的方法

    vue中动态设置meta标签和title标签的方法

    因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { t

  • Vue2 SSR渲染根据不同页面修改 meta

    本文主要介绍了Vue2 SSR渲染根据不同页面修改 meta,分享给大家,具体如下: 注意: 经过测试, vue-meta 会导致内存泄漏, 请慎用- 以现在 vue2 的 服务端渲染模式, 都是通过 webpack 生成 html 模版文件(或者直接在 server.js 里拼接), 然后通过fs.readFileSync 读取该文件, 再通过 res.end 输出, 这样就造成 meta 修改很麻烦 这时候我们可以借助 vue-meta 来管理, 下面以官方的vue-hackernews-2

  • vue-router 中 meta的用法详解

    如果我想做下面这个功能: 路由 代码: 用这个获取 以上这篇vue-router 中 meta的用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue路由对象属性 .meta $route.matched详解

    $route.fullPath 1 路由是:/path/:type真正路径是:/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta:

  • 详解vue-meta如何让你更优雅的管理头部标签

    详解vue-meta如何让你更优雅的管理头部标签

    在 Vue SPA 应用中,如果想要修改HTML的头部标签,或许,你会在代码里,直接这么做: // 改下title document.title = 'what?' // 引入一段script let s = document.createElement('script') s.setAttribute('src', './vconsole.js') document.head.appendChild(s) // 修改meta信息,或者给html标签添加属性... // 此处省略一大坨代码...

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

    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&

  • 微信小程序自定义导航隐藏和显示功能

    微信小程序自定义导航隐藏和显示功能

    微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

  • iOS 设置导航条透明效果的实例代码

    APP中很多界面都是这样的.从有不透明到透明,透明到不透明 以下代码即可实现该功能 //设置导航栏透明 func setNavigationIsTranslucent(isTranslucent:Bool) { if isTranslucent == true { self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) self.navigationController?.navi

  • vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码

    vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码

    一般是有左侧菜单后,然后要在页面上部分添加历史标签菜单需求. 借鉴其他项目,以及网上功能加以组合调整实现 按照标签实现方式步骤来(大致思路): 1,写一个tagNav标签组件 2,在路由文件上每个路由组件都添加meta属性 meta:{title:'组件中文名'} 3,在store的mutation.js文件中写标签的添加/删除方法以及在方法中更新sessionStorage数据 4,在主页面上添加组件以及router-view外层添加keep-alive组件,我这边是main.vue为登录后主

  • 使用react实现手机号的数据同步显示功能的示例代码

    本文介绍了使用react实现手机号的数据同步显示功能的示例代码,分享给大家,具体如下: 要求如下 输入框输入内容数据长度大于0,展示出预览信息 光标离开关闭预览信息 预览信息每隔4位插入一个特殊字符_,输入内容不变 限制长度为13位 只允许输入数字(0-9) // Zinput.js import React, { Component } from 'react'; import './Zinput.css' // NOTE: 获取焦点事件 原生onFocus 即可 // NOTE: 离开焦点事

  • vue不操作dom实现图片轮播的示例代码

    本文介绍了vue不操作dom实现图片轮播的示例代码,分享给大家,具体如下: 效果 宽度为1190px且水平居中的轮播盒子: 中间是当前显示的默认尺寸图片: 左右两边是预显示的小尺寸图片: 轮播从右至左,图片逐渐放大. 做普通平滑轮播也可以参照这个思路 html <ul> <li v-for="(demo,index) in demoList" :key="index" :class="{'demo-left':demoStyle(inde

  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    在Vue中使用CSS3实现内容无缝滚动的示例代码

    一.效果预览 最近在做一个活动页面,遇到幸运用户中奖的滚动公告需求.下面是实现效果: (gif录制略显卡顿,实际效果很流畅) 二.无缝滚动原理 1.容器宽高固定,超出内容隐藏: 2.内容准备2份,现参与滚动的内容有A.B两份,向左滚动: 3.滑动过程中,B份紧随A份之后,营造出无缝滚动回来的效果: 4.在A部分内容完全滚出容器的一瞬间,立刻将AB内容位置复原,由于A.B内容一模一样,这个复原过程很难看出来: 5.循环第3步: 三.代码 1.html部分 <template> <div c

  • Android实现显示和隐藏密码功能的示例代码

    Android实现显示和隐藏密码功能的示例代码

    在前端中我们知道用javascript就可以可以很容易实现,那么在Android中怎么实现这个功能呢? Java代码 package com.example.test2; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.text.method.HideReturnsTransformationMethod; import android.text.method.Pa

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • vue滑动吸顶及锚点定位的示例代码

    在上篇文章给大家介绍了vue实现吸顶.锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看https://www.jb51.net/article/172365.htm 今天给大家继续分享vue滑动吸顶及锚点定位的代码,具体内容如下所示: Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id='menu'> <ul> <li v-for=&q

随机推荐