vueルーティングジャンプ時にナビゲーションバーまたはメニューバーを非表示または削除する

2910 ワード

ルーティングでジャンプすると、各ジャンプページにナビゲーションバーがあるわけではありません.例えば、ログインページをジャンプすると、下部のナビゲーションバーが消えてしまいます.以下に、ナビゲーションバーを消す方法を2つ提供します.
1つ目はv-show 1を用いる.ナビゲーションバーにv-showの判断条件を加えると、$routeはmetaの情報を取得することができ、istrunは私たちがルーティングに追加した変数(v-showの成立を判断するための条件)です.


以下はルーティングのコードです
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      istrun:true
    },
  },
  {
    path: '/menu',
    name: 'About',
    meta:{
      istrun:true
    },
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  },
  {
    path: '/serve',
    name: 'Home',
    component: ()=>import('../views/Home.vue'),
    meta:{
      istrun:true
    },
  },
  {
    path: '/my',
    name: 'Home',
    component: ()=>import('../views/my.vue'),
    meta:{
      istrun:true
    },
  },
  {
    path:"/login",
    name:"login",
    component:()=>import('../views/login.vue')
  }
]

以上、メニューバーの表示にisturn:trueという条件を追加する必要がある場合、v-show=「$router.meta.isturn」と判断すると条件が真で表示され、追加されず、値が:undefinedでfalseと判断され、表示されません.
2.第2の方法は、下部のメニューバーを表示するか、ナビゲーションを1つのルートに配置し、表示しないものを1つのルートに配置することです.まず、ホームフェースにレンダリング領域を設定します.


次に、ナビゲーションバーを表示する必要があるルーティングを1つのコンポーネントに個別に配置します.


最後にrouterでルーティングの詳細を設定し、ロードされたmyコンポーネントにジャンプルーティングログインが書かれています.
const routes = [
  {
    //            
    path:'/',
    name:'zhuye',
    //             ,         ,                  
    component:()=>import('../views/zong.vue'),
    children:[{
      path:'/menu',
      component:()=>import('../views/About.vue')
    },
    {
      path:'/serve',
      component:()=>import('../views/serve.vue')
    },
    {
      path:'/my',
      component:()=>import('../views/my.vue')
    },   
  ]
  },
  //           
  {
    path:'/login',
    component:()=>import('../views/login.vue')
  }
]

以上が一般的な2つの方法であり,ルーティングジャンプ隠しナビゲーションバーまたはメニューバーを実現する方法である.