MENU : Click on a link => How to reload only the content part of the page and not the whole page ?
5 Replies
Sorry for the inconvenience caused.
Please ignore the previous update.
We have validated your requirement. We can able to achieve your requirement by using template in Menu. For your convenience we have prepared video demo here. Please refer the demo, code snippet and sample given below.
main.js
|
import Vue from 'vue'
import App from './App.vue'
import Router from "vue-router";
import router from './router'
Vue.use(Router);
new Vue({
router,
el: '#app',
render: h => h(App),
})
|
router.js
|
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './Home'
import Core from './Core'
import Mvc from './Mvc'
import Javascript from './Javascript'
import Angular from './Angular'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/core', component: Core },
{ path: '/angular', component: Angular},
{ path: '/mvc', component: Mvc},
{ path: '/javascript', component: Javascript}
]
export default new VueRouter({
routes,
mode: 'history',
})
|
App.vue
|
<template>
<div class="template-menu-control">
<ejs-menu :items="data" :fields="menuFields" :template="menuTemplate"></ejs-menu>
<div id="app">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { MenuPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(MenuPlugin);
export default {
data: function() {
var menutemplateVue = Vue.component("demo", {
template: ' <span v-if="data.category"> {{data.category}} </span>'+
' <div v-else-if="data.value" style="width: 100%;display: flex;justify-content: space-between;">'+
'<router-link :to="data.url" exact tag="li"><a class="e-menu-url">{{data.value}}</a></router-link></div>' +
'<span class="e-menu-template" v-else-if="data.support">'+
'<ul>'+
'<li v-bind:key="index" v-for="(val,index) of data.support">'+
' {{val.value}} ' +
'<span v-if="val.count" class="e-badge e-badge-success">{{val.count}}</span> '+
' </li> '+
'</ul>'+
'</span>',
data() {
return {
data: {}
}
}
});
return {
data: [
{
category: 'Products',
options: [
{ value: 'JavaScript', url: 'javascript' },
{ value: 'Angular', url: 'angular' },
{ value: 'ASP.NET Core', url: 'core' },
{ value: 'ASP.NET MVC', url: 'mvc' }
]
},
{
category: 'Services',
options: [
{
support: [
{ value: 'Application Development', count: '1200+' },
{ value: 'Maintenance & Support', count: '3700+' },
{ value: 'Quality Assurance' },
{ value: 'Cloud Integration', count: '900+' }
]
}
]
},
{ category: 'Careers' },
{ category: 'Sign In' }
],
menuFields: {
text: ['category', 'value'],
children: ['options']
},
menuTemplate: function () {
return {
template : menutemplateVue
}
}
};
}
}
</script>
|
To run the sample please follow the below steps.
1.Extract the attachments from above Sample link.
2.Open the quickstart folder in command prompt
3.Give command npm install
 |
4. After npm installed, give command npm run dev
 |
5. Sample page will open in new tab in default Browser.
 |
Could you please check the above details and get back to us, if you need assistance on this.
Regards,
Aravinthan S
SIGN IN To post a reply.
