Question

我是一名新程序员，正在尝试制作一个无切换的侧边栏，例如管理页面。路由器视图未显示在页面右侧。我知道我没有每个导航列表的href链接，我在哪里以及如何做到这一点？此外，应用程序是否与SellingSummary页面发生冲突？我在错误的位置插入了路由器视图吗？

我需要帮助，谢谢!!!!

image

<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

可视化显示在v-navigation-drawer右侧的文本

2 个答案: