可視化顯示在v-navigation-drawer右側的文本

Question

我是一名新程序員，並嘗試制作一個非切換的側邊欄，例如管理頁面。 路由器視圖未顯示在頁面右側。 我知道我沒有每個導航列表的href鏈接，我在哪里以及如何做到這一點？ 此外，應用程序是否與SellingSummary頁面發生沖突？ 我在錯誤的位置插入了路由器視圖嗎？

我需要幫助，謝謝!!!!

圖片

<template>

 <div>
  <v-app id="inspire">
    <v-navigation-drawer
      stateless
      value="true"
  >
    <v-list>
      <v-list-group
        no-action
        prepend-icon="account_circle"
        value="true"
      >
        <v-list-tile slot="activator">
          <v-list-tile-title>admins</v-list-tile-title>
        </v-list-tile>
        <v-list-tile
          v-for="(admin, i) in admins"
          :key="i"
          @click=""
        >
          <v-list-tile-title v-text="admin[0]"></v-list-tile-title>
            <v-list-tile-action>
              <v-icon v-text="admin[1]"></v-icon>
            </v-list-tile-action>
          </v-list-tile>
      </v-list-group>
    </v-list>
  </v-navigation-drawer>
  <div>
    <router-view></router-view>
  </div>
</v-app>
</div>
</template>

<script>
  export default {
    data() {
      return {
       admins: [
        ['Management', 'people_outline'],
        ['Settings', 'settings']
       ]
     }
   }
 }
 </script>

./router/index.js

  import Vue from 'vue'
  import Router from 'vue-router'
  import AppS from '@/components/SellingPage/AppS'
  import sellingSummary from '@/components/SellingPage/subPage/sellingSummary'


  Vue.use(Router)

  export default new Router({
    routes: [
      {
        path: '/SellingPage',
        name: 'AppS',
        component: AppS
      },
      {
        path: '/SellingPage',
        name: 'sellingSummary',
        component: sellingSummary
      }
    ]
  })

./components/SellingPage/subPage/sellingSummary

<template>
  <div>
   <p>Hi, first</p>
  </div>
</template>

./components/SellingPage/AppS

<template>
      <div>
        <app-header></app-header>
        <v-card>
          <app-selling>
          </app-selling>
        </v-card>

      </div>

    </template>

    <script>
      import Header from '../Header.vue';
      import Selling from './Selling.vue';

      export default {
        components: {
          'app-header': Header,
          'app-selling': Selling
        }
      }

    </script>

Answer 1

<v-navigation-drawer
    disable-route-watcher 
    enable-resize-watcher
    :clipped="clipped"
     v-model="sideNav"      
    dark  
    app       
>

嘗試這個

Answer 2

對於初學者，您不能在路由器中為不同的組件配置兩條路由。 路由器將僅使用第一個條目。

在組件Vue文件中，在data屬性中添加以下屬性

drawer: true,

例：

export default {
  data: () => ({
      drawer: true
    })
}

導航抽屜具有項目數據屬性，可用於循環瀏覽現有菜單項。

在某些屬性中，可以在按下該菜單項時添加指向路由器上現有路徑的路徑屬性。

這是一個例子：

https://codepen.io/wernerm/pen/rzqqbR