Menu
Versions and Environment
Vuetify: 1.0.13
Vue: 2.5.13
Browsers: Chrome 67.0.3396.48
OS: Windows 10
Steps to reproduce the problem
Create a nav-drawer that has router-links in it.
In one of the links create a v-tab component that shows router-view for each tab.
Expected Behavior
In one of the links in the navigation-drawer, I have a link that connects to router view in one of it I have <v-tab> that connects to another router-view. Can you please help me?
Actual Behavior
The router-view for the tabs doesn't show up
Reproduction Link:
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>
in one of the view :
<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>
I added this another router-view to display the result of the tab.
<router-view name="main"></router-view>
</v-tabs>
To give you an overview something like this is all I needed :
video
503
The RouterView or router-view component is used to display the current route the user is at.
Open Link in a New Tab However, if we want to open the /about page in a new tab, then we have to add a target attribute with _blank as a value in our <router-link> component. Programatically, we can navigate a page and open it in a new tab using the $router instance. In the above code, we have used this.
Codepen
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},
],
},
]
Components that you want to show in tabs should be included in your child routes.
Then place router-view inside v-tab-items (in case you use v-for, don't forget to use keys):
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
