如何在侧边栏之外的vuetify spa中添加登录表单

Question

我是spa路由世界的新手。我在前端使用vuejs，在后端使用laravel，并使用vuetify组件框架。

我的应用程序根是{domain}/app。后端的路由定义：

Route::get('app', function () {
return view('index');
});

以下是index.blade.php的外观：

@extends('master')
@section('content')
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
fixed
app
>
<!-- Some other components -->
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-navigation-drawer>
@endsection

但当我需要一个全新的页面时，情况会变得更糟，比如登录页面。我不能把它放在导航抽屉里，它不是v-app的子代，但它本身就是另一个v-app。以下是我的Login.vue的样子：

<v-app id="inspire">
<v-content>
<v-container fluid fill-height>
<!-- login form -->
</v-container>
</v-content>
</v-app>

如何设置路由，使登录路由不会嵌套到v-app(由router-view填充(中，而其本身将是另一个v-app？

这是我当前的设置(routes.js(：

let routes = [
{ path: '/', component: require('./views/Home') },
{ path: '/login', component: require('./views/auth/Login') },
{ path: '/order', component: require('./views/order/List') },
//... other routes ...
]

Answer 1

像这样尝试

App.vue(根(

<template>
<main>
<transition mode="out-in">
<router-view></router-view>
</transition>
</main>
</template>

在app.js中配置#app的布局

import AppLayout from './components/App.vue'
new Vue(
Vue.util.extend(
{ router, store },   // router.js, store.js (if using module or Vuex)
AppLayout
)  
).$mount('#app')

主页.vue(主页(

<template>
<v-app id="home">
//...any contents here like navbars
<v-content>
<transition mode="out-in">
<router-view></router-view>
</transition>
</v-content>
</v-app>
</template>

Dashboard.vue(带导航抽屉(

<template>
<v-app id="dashboard">
<v-navigation-drawer app>
...
</v-navigation-drawer>
//...any contents here
<v-content>
<transition mode="out-in">
<router-view></router-view>
</transition>
</v-content>
</v-app>
</template>

路由.js

import Home from './components/Home'
import Login from './components/Login'
import Dashboard from './components/Dashboard'
import Panel from './components/Panel'
export const routes = [
{
path: '/',
component: Home,
children: [
{
path: '/login',
component: Login
}
]
},
{
path: '/dashboard',
component: Dashboard,
children: [
{
path: '/dashboard/panel',
component: Panel
}
]
}
]