Vue/Vuetify(v2)嵌套路由实现登录页与带工具条页面布局问题

我来帮你搞定这个Vuetify布局的问题！你的嵌套路由思路是完全正确的，问题出在Authenticated组件的布局结构没有遵循Vuetify的布局规范，导致页面元素错位。下面是具体的修复步骤和代码调整：

核心问题分析 #

你当前的Authenticated.vue直接用div包裹v-app-bar、v-navigation-drawer和router-view，但没有利用Vuetify提供的布局属性（比如app）和v-main组件来管理空间分配，这会导致主内容区域和顶部栏、抽屉重叠，或者布局错乱。

修复方案 #

1. 调整Authenticated.vue的布局结构 #

给顶部栏和抽屉添加app属性，让Vuetify自动处理它们的固定定位和空间占用；同时用v-main包裹子路由视图，确保主内容区域避开顶部栏和抽屉：

<template>
  <div>
    <!-- 添加app属性，让AppBar固定在顶部并预留对应空间 -->
    <v-app-bar dense dark class="primary" app>
      <!-- 这里放你的AppBar内容，比如标题、用户信息等 -->
      <v-toolbar-title>我的应用</v-toolbar-title>
    </v-app-bar>

    <!-- 添加app属性，让导航抽屉与AppBar配合布局 -->
    <v-navigation-drawer permanent clipped app>
      <!-- 这里放你的导航菜单内容 -->
      <v-list>
        <v-list-item :to="{ name: 'Home' }">
          <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon>
          <v-list-item-title>首页</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- 用v-main包裹子路由视图，确保内容在正确的区域显示 -->
    <v-main>
      <router-view/>
    </v-main>
  </div>
</template>

<script>
export default {
  name: 'Authenticated'
}
</script>

2. 优化路由配置（可选） #

你的路由结构没问题，不过可以添加默认重定向和访客路由限制，让逻辑更完整：

// routes.ts
const routes = [
  {
    path: '/auth',
    component: Authenticated,
    meta: { requiresAuth: true },
    children: [
      {
        path: 'home',
        name: 'Home',
        component: Home,
        meta: { requiresAuth: true },
      },
      // 可以在这里添加其他需要登录才能访问的子路由
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: { requiresGuest: true } // 已登录用户访问登录页自动跳转到首页
  },
  // 默认路由重定向到登录页
  {
    path: '/',
    redirect: '/login'
  }
];

3. 添加路由守卫（确保权限控制） #

为了防止未登录用户直接访问/auth下的页面，需要添加全局路由守卫：

// router/index.ts
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  // 根据你的登录逻辑判断用户是否已认证，比如检查localStorage中的token
  const isAuthenticated = localStorage.getItem('authToken') !== null;

  // 处理需要登录的路由
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next('/login');
    } else {
      next();
    }
  } 
  // 处理已登录用户不能访问的路由（比如登录页）
  else if (to.matched.some(record => record.meta.requiresGuest)) {
    if (isAuthenticated) {
      next('/auth/home');
    } else {
      next();
    }
  } 
  // 其他路由直接放行
  else {
    next();
  }
});

export default router;

效果验证 #

现在访问/login时，只会渲染Login组件，不会显示顶部栏和抽屉；登录后跳转到/auth/home时，Authenticated组件会渲染顶部栏、抽屉和Home组件，布局完全正常，不会出现重叠或错乱的问题。

内容的提问来源于stack exchange，提问作者eszik.k