Vue RouterVisões Nomeadas
Algumas vezes precisas exibir várias visões ao mesmo tempo ao invés de encaixá-las, por exemplo, criar um esquema com uma visão sidebar e uma visão main. Isto é onde as visões nomeadas dão jeito. Ao invés de ter uma único modo de canalização na tua visão, podes ter vários e dar a cada um deles um nome. Um router-view sem um nome será dado default como seu nome.
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view><router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>Uma visão é apresentada com o uso de um componente, portanto várias visões exigem vários componentes para a mesma rota. Certifica-te de usar a components (com uma opção s):
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
components: {
default: Home,
// abreviação para LeftSidebar: LeftSidebar
LeftSidebar,
// eles correspondem o atributo `name` no `<router-view>`
RightSidebar,
},
},
],
})const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
components: {
default: Home,
// abreviação para LeftSidebar: LeftSidebar
LeftSidebar,
// eles correspondem o atributo `name` no `<router-view>`
RightSidebar,
},
},
],
})Uma demonstração em funcionamento deste exemplo pode ser encontrado nesta ligação.
Visões Nomeadas Encaixadas
É possível criar esquemas complexos usando visões nomeadas com visões encaixadas. Quando estiveres a fazer isto, também precisarás dar ao router-view encaixado um nome. Consideremos um exemplo de painel de Definições:
/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettings | | UserSettings |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettings | | UserSettings |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+Navé apenas um componente regularUserSettingsé componente de visão paiUserEmailsSubscriptions,UserProfile,UserProfilePreviewsão componentes de visão encaixados
Nota: Vamos esquecer de como a HTML/CSS deveriam se parecer para representar tal esquema e concentrar-nos nos componentes usados.
A seção <template> para o componente UserSettings no esquema acima se pareceria com alguma como isto:
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar />
<router-view />
<router-view name="helper" />
</div><!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar />
<router-view />
<router-view name="helper" />
</div>Então podes alcançar o esquema acima com esta configuração de rota:
{
path: '/settings',
// Tu poderias também ter visões nomeadas no top
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}{
path: '/settings',
// Tu poderias também ter visões nomeadas no top
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}Uma demonstração em funcionamento deste exemplo pode ser encontrado nesta ligação.