导航栏在部分页面显示,部分页面不显示的方法

导航栏在部分页面显示,部分页面不显示的方法

可以通过路由的meta标签来判断哪些页面需要导航栏,哪些页面不需要导航栏。

APP.vue中:

<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">			//需要导航栏的页面
        <navTop></navTop>
        <router-view></router-view>
    </div>
    <div v-if="!$route.meta.keepAlive">			//不需要导航栏的页面
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import navTop from '@/components/common/nav.vue';
export default {
  name:"commonNav",
  components:{
     navTop
  }
}
</script>

router.js中:

{
      path: '/login',
      name: "Login",
      component: Login,
      meta: {
        keepAlive: true			//keepAlive这个字段是可以随意更改的
      }
},

这样,导航栏就只会在你设置keepAlive属性值为true的页面显示了。

  • 34
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现导航栏页面切换,可以使用一些前端框架如Bootstrap或jQuery,或者使用原生HTML、CSS和JavaScript。 以下是一种使用原生HTML、CSS和JavaScript实现导航栏页面切换的方法: 1. HTML代码: ``` <!DOCTYPE html> <html> <head> <title>导航栏页面切换</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#" class="active" data-target="page1">Page 1</a></li> <li><a href="#" data-target="page2">Page 2</a></li> <li><a href="#" data-target="page3">Page 3</a></li> </ul> </nav> </header> <main> <section id="page1" class="active"> <h1>Page 1</h1> <p>This is the content of Page 1.</p> </section> <section id="page2"> <h1>Page 2</h1> <p>This is the content of Page 2.</p> </section> <section id="page3"> <h1>Page 3</h1> <p>This is the content of Page 3.</p> </section> </main> <script src="script.js"></script> </body> </html> ``` 2. CSS代码: ``` header { background-color: #333; color: #fff; padding: 10px; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } nav a.active { font-weight: bold; } section { display: none; padding: 20px; } section.active { display: block; } ``` 3. JavaScript代码: ``` window.onload = function() { // 获取所有的导航链接 var links = document.querySelectorAll('nav a'); // 获取所有的页面部分 var sections = document.querySelectorAll('section'); // 遍历每个导航链接 for (var i = 0; i < links.length; i++) { // 添加点击事件处理程序 links[i].addEventListener('click', function(e) { e.preventDefault(); // 阻止默认行为 // 移除所有导航链接的“active”类 for (var j = 0; j < links.length; j++) { links[j].classList.remove('active'); } // 添加当前导航链接的“active”类 this.classList.add('active'); // 显示对应的页面部分 var target = this.getAttribute('data-target'); for (var k = 0; k < sections.length; k++) { if (sections[k].getAttribute('id') == target) { sections[k].classList.add('active'); } else { sections[k].classList.remove('active'); } } }); } }; ``` 这段JavaScript代码会在文档加载完毕时执行,遍历每个导航链接并添加点击事件处理程序。当用户点击某个导航链接时,会阻止默认行为并移除所有导航链接的“active”类,然后添加当前导航链接的“active”类并显示对应的页面部分

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值