<template>
<div>
<div class="control_wrapper">
<ejs-tab id="tab_default" ref="Tab_instance" heightAdjustMode="Auto" :selected="loadRoutingContent" ref="tabInstance">
<e-tabitems>
<e-tabitem :header="headerText0" :content="idv1"></e-tabitem>
<e-tabitem :header="headerText1" :content="idv1"></e-tabitem>
<e-tabitem :header="headerText2" :content="idv1"></e-tabitem>
</e-tabitems>
</ejs-tab>
<div id="idv1">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import Vuex from "vuex";
import { TabPlugin } from "@syncfusion/ej2-vue-navigations";
import { ref } from "vue";
Vue.use(TabPlugin);
Vue.use(Vuex);
const Tab_instance = ref(null);
export default Vue.extend({
name: "DefaultMenu",
data() {
return {
index: 1,
isLoadRoutingContentWatch: false,
isLoadRoutingContentEvent: false,
headerText0: { text: "Angular" },
headerText1: { text: "Javascript" },
headerText2: { text: "Service" },
};
},
watch: {
$route(to) {
var tabObj = Tab_instance.value.$el.ej2_instances[0];
if (to.path === "/angular") {
tabObj.select(0);
} else if (to.path === "/javascript") {
tabObj.select(1);
} else if (to.path === "/services") {
tabObj.select(2);
} else {
tabObj.select(0);
}
this.StartRouting(to.path);
},
},
methods: {
loadRoutingContent(args) {
var urlData;
if (args.selectedIndex === 0) {
urlData = "/angular";
} else if (args.selectedIndex === 1) {
urlData = "/javascript";
} else if (args.selectedIndex === 2) {
urlData = "/services";
}
this.StartRouting(urlData);
},
StartRouting: function (path) {
if (path && this.$route.path !== path) {
//Performs routing...
this.$router.push(path);
}
},
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style></style>
