Question

我正在尝试设置仅包含一张表格的路由，该表格的布局受Vuetify团队的启发。我有个问题，桌子不能只占据屏幕的一小部分。

我尝试将v-layout与“ row”，“ column”以及不同的paddings和marging一起使用。

App.vue：

<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

Menu.vue：

<template>
<v-container>
  <v-navigation-drawer
      clipped
      fixed
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-tile
        :to="{name: 'dashboard'}"
        >
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile
        :to="{name: 'settings'}"
        >
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile
        @click="logout();"
        >
          <v-list-tile-action>
            <v-icon>logout</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Logout</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Hello, {{ name }}</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-flex shrink>
            <router-view></router-view>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app fixed>
      <span>&copy; arcyfelix 2019</span>
    </v-footer>
    </v-container>
</template>

<script>
export default {
  name: 'MainMenu',
  data() {
    return {
      drawer: false,
      name: 'Wojciech',
    };
  },
  methods: {
    logout() {
      this.$router.push({ name: 'home' });
    },
  },
};
</script>

Dashboard.vue：

<template>
  <v-layout full-width>
    <v-data-table
      :items="desserts"
      class="elevation-1"
      hide-actions
      hide-headers
      expand
      :loading="true"
    >
      <template v-slot:items="props">
        <td class="text-xs-left">2019-07-01</td>
        <td>{{ props.item.name }}</td>
        <td>
          <v-btn
          small
          depressed
          flat
          >
            Edit
          </v-btn>
        </td>
      </template>
    </v-data-table>
  </v-layout>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      desserts: [
        {
          name: 'Frozen Yogurt',
        },
        {
          name: 'Donut',
        },
        {
          name: 'KitKat',
        },
      ],
    };
  },
};
</script>

router.js：

import Vue from 'vue';
import Router from 'vue-router';

import Menu from './layouts/Menu.vue';
import MainMenu from './layouts/MainMenu.vue';
import Dashboard from './views/Dashboard.vue';
import Login from './views/Login.vue';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: 'auth',
      name: 'auth',
      component: Menu,
      children: [
        {
          path: 'dashboard',
          name: 'dashboard',
          component: Dashboard,
        },
        {
          path: 'settings',
          name: 'settings',
          component: () => import(/* webpackChunkName: "about" */ './views/Settings.vue'),
        },
      ],
    },
    {
      path: '/',
      name: 'mainMenu',
      component: MainMenu,
      children: [
        {
          path: 'home',
          name: 'home',
          component: Home,
        },
        {
          path: 'login',
          name: 'login',
          component: Login,
        },
        {
          path: 'register',
          name: 'register',
          component: () => import(/* webpackChunkName: "about" */ './views/Register.vue'),
        },
      ],
    },
  ],
});

我想让它占屏幕的2/3或整个宽度。

Answer 1

您真正想要的是将menu放在router-view之外，否则每次加载页面时都要重新加载。您还希望将container定义移到v-content元素内，并确保它使用的fill-height太少，以至于最终得到奇怪的背景网格。

<v-app>
   <my-menu></my-menu>
   <v-content>
       <v-container fluid fill-height>
           <router-view></router-view>
       </v-container>
   </v-content>
</v-app>

现在只需更改仪表板代码和布局：

<v-layout row wrap>
    <v-flex xs12>
        //the rest of the dashboard code
    </v-flex> 
</v-layout

你很好。

验证路由器对齐

1 个答案: