Javascript 如何在侧边栏之外的vuetify 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

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

像这样试试

App.vue（根目录）

Home.vue（主页）

为什么您的登录路径需要在自己的Vue应用程序中？@NiallGMC，因为它是一个单独的页面。它不能是仪表板/主页的一部分，对吗？因为这样看起来登录页面有一个导航抽屉。如果你想在真实的项目中看到它，这里有一个
<v-app id="inspire">
      <v-content>
        <v-container fluid fill-height>
        <!-- login form -->
        </v-container>
      </v-content>
</v-app>

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

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

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')

<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>

<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>

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
        }
    ]
 }
]