vue设置导航栏为公共模块部分页面不显示

1.公共模块的内容可以放在App.vue中

但是通常登录页面是不需要导航的,那么就需要规避登录页
这时,就可以采用keep-alive结合route.meta则可以选择让需要的页面才展示。修改App.vue,如下:

<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">
      <headers></headers>
      <router-view></router-view>
    </div>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <footers></footers>
  </div>
</template>
<script>
import headers from "@/views/headers";
import footers from "@/views/footers";
export default {
  name: "app",
  components: {
    headers,
    footers
  }
};
</script>
<style>
#app {
  width: 100%;
  min-width: 1200px;
  background: white;
  /*font-family: "苹方简常规体";*/
}
</style>

2.修改路由 index.js

{
      path: '/',
      name: 'indexs',
      meta:{
        title: 'goplastic',
        isLogin: true,
        keepAlive: true //true显示头部
      },
      component: indexs
    },
    {
      path:'*',
      redirect: '/'
    },
    {
      path: '/login',
      name: 'login',
      meta:{
        title: '登录',
        keepAlive: false  //false不显示头部
      },
      component:resolve => require(['@/views/login_wj/login'],resolve),
    },

猜你喜欢

转载自blog.csdn.net/weixin_34217773/article/details/91012934
今日推荐