私はVueを初めて使用し、ユーザーがWebサイトをナビゲートできるサイドメニューを備えたVueアプリを作成しています。
私はVueルーターを使用していますが、コードは次のようになっています
<template>
<div id="app">
<Header />
<SideMenu
active="0"
/>
<router-view/>
</div>
</template>
ユーザーがSideMenuリンクのいずれかをクリックすると、別のルートに移動し、コンテンツは再度ロードせずにSideMenuの横に生成されます。
サイドメニューとヘッダーのない/ loginルートが必要な場合はどうなりますか？
これを行ってから、すべてのルートビュー内でヘッダーコンポーネントとメニューコンポーネントを移動する必要がありますか？
<template>
<div id="app">
<router-view/>
</div>
</template>
これを行うと、ユーザーがリンクをクリックするたびにヘッダーとメニューが再度読み込まれ、アプリの速度が低下します。
私に何ができる？
（ルータービューを別のビュー内に移動できますか？）
これはvue routerドキュメントに記載されています。以下の例のようにルートを定義することで、レイアウトを「チェーン」できます。途中の各Vue-Componentは、router-view次のコンテンツを実際に表示するための要素を実装する必要があります。
{
path: '/login',
component: () => import('layouts/AuthLayout.vue'),
children: [
{
path: '',
name: 'login',
component: () => import('pages/Login.vue')
}
]
},
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
name: 'dashboard',
component: () => import('pages/Dashboard.vue')
}
]
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加