<template>
<div>
<ejs-menu :items='menuItems' :select='select'></ejs-menu>
<router-view/>
</div>
</template>
<script>
import Vue from 'vue';
import { MenuPlugin } from "@syncfusion/ej2-vue-navigations";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(MenuPlugin);
/* eslint-disable */
export default {
data: function() {
return {
menuItems: [
{ text: 'File' },
{ text: 'Edit' },
{ text: 'View' },
{ text: 'Tools'},
{ text: 'Go' }
]
};
},
methods: {
select: function(args) {
this.$router.push(args.item.text);
}
}
}
</script>
|
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import File from '@/components/File'
import Edit from '@/components/Edit'
import View from '@/components/View'
import Tools from '@/components/Tools'
import Go from '@/components/Go'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/file',
name: 'File',
component: File
},
{
path: '/edit',
name: 'Edit',
component: Edit
},
{
path: '/view',
name: 'View',
component: View
},
{
path: '/tools',
name: 'Tools',
component: Tools
},
{
path: '/go',
name: 'Go',
component: Go
}
]
})
|