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

Question

我是水疗路由世界的新手。我在前端使用 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中configure #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')

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

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