vuetify.js - 当我为抽屉导航设置不同的设置时，为选项卡设置路由器 View

Question

版本和环境

Vuetify: 1.0.13

Vue: 2.5.13

Browsers: Chrome 67.0.3396.48

OS: Windows 10

重现问题的步骤

创建一个包含路由器链接的抽屉导航。

在其中一个链接中创建一个 v-tab 组件，显示每个选项卡的路由器 View 。

预期行为

在抽屉导航中的一个链接中，我有一个连接到路由器 View 的链接，其中一个我有 <v-tab>连接到另一个路由器 View 。你能帮我么？

实际行为

The router-view for the tabs doesn't show up

复制链接:

https://codepen.io/aabbrrm234/pen/deQjEe

<v-app id="inspire">
        <v-navigation-drawer fixed :clipped="true" app v-model="drawer">
            <v-list dense>
                <template v-for="item in items">
                    <v-layout
                    row
                    v-if="item.heading"
                    align-center
                    :key="item.heading"
                    >
                    <v-flex xs6>
                        <v-subheader v-if="item.heading">
                            {{ item.heading }}
                        </v-subheader>
                    </v-flex>
                    <v-flex xs6 class="text-xs-center">
                        <a href="#!" class="body-2 black--text">EDIT</a>
                    </v-flex>
                </v-layout>
                <v-list-group
                v-else-if="item.children"
                v-model="item.model"
                :key="item.text"
                :prepend-icon="item.model ? item.icon : item['icon-alt']"
                append-icon=""
                >
                <v-list-tile slot="activator">
                    <v-list-tile-content>
                        <v-list-tile-title>
                            {{ item.text }}
                        </v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
                <v-list-tile
                v-for="(child, i) in item.children"
                :key="i"
                @click=""
                >
                <v-list-tile-action v-if="child.icon">
                    <v-icon>{{ child.icon }}</v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
                    <v-list-tile-title>
                        {{ child.text }}
                    </v-list-tile-title>
                </v-list-tile-content>
            </v-list-tile>
        </v-list-group>
        <v-list-tile v-else router :to="item.link" :key="item.text">
            <v-list-tile-action>
                <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
                <v-list-tile-title>
                    {{ item.text }}
                </v-list-tile-title>
            </v-list-tile-content>
        </v-list-tile>
    </template>
</v-list>
</v-navigation-drawer>

<v-toolbar color="grey lighten-3" light app
:clipped-left="$vuetify.breakpoint.lgAndUp"
fixed
>

<v-toolbar-title style="width: 300px" class="ml-0 pl-3">
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <span class="hidden-xs-and-down">App</span>
</v-toolbar-title>

<v-spacer></v-spacer>

<v-menu offset-y>
    <v-icon slot="activator">more_vert</v-icon>
    <v-list>
        <v-list-tile @click="logout"> 
            <v-list-tile-title>Logout</v-list-tile-title>
        </v-list-tile>
    </v-list>
</v-menu>

</v-toolbar>
<v-content>
    <!-- <v-container xs7 offset-xs2 offset-md2 offset-lg5> -->
        <!-- <v-layout> -->
            <!-- content goes here  -->
            <!-- <router-view class="mt-0.3"></router-view> -->
            <!-- end content  -->
        <!-- </v-layout>
        </v-container> -->
        <!-- <v-container grid-list-xl text-xs-center> -->
            <v-layout row wrap>
                <v-flex xs12 sm12 md12>
                    <router-view></router-view>
                </v-flex>
            </v-layout>
            <!-- </v-container> -->
</v-content>
    <!-- <v-btn
      fab
      bottom
      right
      color="pink"
      dark
      fixed
      @click.stop="dialog = !dialog"
    >
      <v-icon>add</v-icon>
  </v-btn> -->
</v-app>


<script>
export default {
    data: () => ({

        // userId : authUser.id ,

        dialog: false,

        drawer: null,

        items: [

        { icon: 'home', text: 'Home', link: '/' },

        { icon: 'motorcycle', text: 'Start Delivery', link: '/delivery' },

        { icon: 'people', text: 'Account Settings', link: '/account' },

        { icon: 'exit_to_app', text: 'Logout', link: 'logout' },

        { icon: 'map', text: 'Addresses', link: '/addresses' },

        {  icon :'list', text : 'Parcels To Pack', link : '/to-pack'}

        ],

        tabItems : [

        {  text : 'Parcels to Pack', routeName : 'showParcelsToPack' }, 

        {  text : 'Show Delivery Map', routeName : 'deliveryMap'},

        ],
        // speed dial
        direction: 'top',

        fab: false,

        fling: false,

        hover: false,

        tabs: null,

        top: false,

        right: true,

        bottom: true,

        left: false,

        transition: 'slide-y-reverse-transition'

    }),
    props: {
        source: String
    },
    methods: {
        logout () {
            window.location.href = '/auth/logout'
        }
    }
};
</script>

在其中一种观点中:

<v-tabs icons-and-text centered dark color="red">

        <v-tab to="/delivery">
            Addresses
            <v-icon>shopping_cart</v-icon>
        </v-tab>

        <v-tab :to="{ name : 'parcelsToPack', params : { id : 3 }}">
            Parcels To Pack
            <v-icon>list</v-icon>
        </v-tab>

        <v-tab :to="{ name : 'googleMap', params : { id : 3 } }">
            Map<v-icon>map</v-icon>
        </v-tab>

        <v-tabs-slider color="white"></v-tabs-slider>

我添加了另一个路由器 View 来显示选项卡的结果。

        <router-view name="main"></router-view>


    </v-tabs>

为了给你一个概述，我只需要这样的东西:

video

Answer 1

Codepen

您需要使用 nested routes :

routes: [
    {path: '/',name: 'Home', component: homePage,},
    {path: '/user',name: 'User', component: userPage,
        children: [
            {path: '/profile',name: 'Profile', component: profile},
            {path: '/activity',name: 'Activity', component: activity},
        ],
    },
]

您想要在选项卡中显示的组件应包含在您的子路由中。

然后放置 router-view内 v-tab-item s(如果您使用 v-for ，请不要忘记使用 key s):

<v-tabs v-model="activeTab">
    <v-tab to="profile">Profile</v-tab>
    <v-tab to="activity">Activity</v-tab>
</v-tabs>

<v-tabs-items v-model="activeTab">
    <v-tab-item id="profile">
        <router-view></router-view>
    </v-tab-item>
    <v-tab-item id="activity">
        <router-view></router-view>
    </v-tab-item>
</v-tabs-items>