vueルーティングジャンプ時にナビゲーションバーまたはメニューバーを非表示または削除する
2910 ワード
ルーティングでジャンプすると、各ジャンプページにナビゲーションバーがあるわけではありません.例えば、ログインページをジャンプすると、下部のナビゲーションバーが消えてしまいます.以下に、ナビゲーションバーを消す方法を2つ提供します.
1つ目はv-show 1を用いる.ナビゲーションバーにv-showの判断条件を加えると、$routeはmetaの情報を取得することができ、istrunは私たちがルーティングに追加した変数(v-showの成立を判断するための条件)です.
以下はルーティングのコードです
以上、メニューバーの表示にisturn:trueという条件を追加する必要がある場合、v-show=「$router.meta.isturn」と判断すると条件が真で表示され、追加されず、値が:undefinedでfalseと判断され、表示されません.
2.第2の方法は、下部のメニューバーを表示するか、ナビゲーションを1つのルートに配置し、表示しないものを1つのルートに配置することです.まず、ホームフェースにレンダリング領域を設定します.
次に、ナビゲーションバーを表示する必要があるルーティングを1つのコンポーネントに個別に配置します.
最後にrouterでルーティングの詳細を設定し、ロードされたmyコンポーネントにジャンプルーティングログインが書かれています.
以上が一般的な2つの方法であり,ルーティングジャンプ隠しナビゲーションバーまたはメニューバーを実現する方法である.
1つ目はv-show 1を用いる.ナビゲーションバーにv-showの判断条件を加えると、$routeはmetaの情報を取得することができ、istrunは私たちがルーティングに追加した変数(v-showの成立を判断するための条件)です.
{{$route}}
以下はルーティングのコードです
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つの方法であり,ルーティングジャンプ隠しナビゲーションバーまたはメニューバーを実現する方法である.