I've been utilizing vuesax [ https://github.com/lusaxweb/vuesax ] for managing tabs. Within vs-tabs, I have multiple router-views. I am looking to display different Vue template files for each respective tab of the router-view.
Below is the code snippet from app.vue:
<template>
<div id="app">
<div class="">
<h3 style="color: #0DB26B;">
home <mark class="red">New</mark> Design
</h3>
<vs-tabs :color="colorx" alignment="fixed" >
<vs-tab label="Home" >
<router-link
tag="button" class="btn btn-link" to="/home">Home
</router-link>
<div class="con-tab-ejemplo">
<router-view></router-view>
</div>
</vs-tab>
<vs-tab label="Add Invoice" >
<router-link
tag="button" class="btn btn-link" to="/card">Card
</router-link>
<div class="con-tab-ejemplo">
<router-view></router-view>
</div>
</vs-tab>
<vs-tab label="Profile">
<div class="con-tab-ejemplo">
<router-view></router-view>
</div>
</vs-tab>
</vs-tabs>
</div>
</div>
</template>
Here is the router code from index.js:
import Vue from 'vue'
import Router from 'vue-router';
import Home from '@/components/Home';
import Card from '@/components/Card';
Vue.use(Router);
let router = new Router({
routes: [
{
path: '/home',
name:"Home",
component: Home,
},
{
path: '/card',
name:"Card",
component: Card,
},
]
});
export default router;
My current issues:
1.) The same Vue template is being displayed in all vs-tabs router-views. How can I display different templates for each tab? 2.) How can I set router-links for vs-tabs?
Attached are screenshots for reference:
Any assistance on this matter would be greatly appreciated. Thank you.