We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to use Vue Router with Sidebar Menu Example

Hello,

I am currently working on the Vue Sidebar Menu example located here: https://ej2.syncfusion.com/vue/demos/samples/sidebar/sidebar-menu/index.html

Everything is working as it should but I would like to link the nav items to my routes controlled by Vue Router.
I see a 'url' property but that just inserts a static route which forces a complete page refresh when it is clicked? I have also tried inserting router.push() into that property but executes the call on page load not on click OR can I access the on-click event for a nav item?

What would be the best way to hook in proper routes into this component?
Any help would be greatly appreciated.

return {
      width: "220px",
      mediaQuery: "(min-width: 600px)",
      target: ".main-content",
      dockSize: "52px",
      enableDock: true,
      menuItems: [
        {
          text: "Home",
          id: "home",
          url: '/',
          iconCss: "fa-home fa"
        },
        {
          text: "Dashboards",
          id: "dashboards",
          iconCss: "fa-chart-line fa",
          items: [
            { text: "TShoot v1", id: "tshoot", url: '/dashboard/tshoot' },
            { text: "Yield v1", id: "yield", url: '/dashboard/yield' },



3 Replies

AD Arunkumar Devendiran Syncfusion Team April 20, 2020 04:41 AM UTC

Hi Jassen Michaels, 
 
Sorry for the late reply. 
 
We have checked your reported your query and could you please share us in which case you are trying to use routing n menu bar. Could you please share your exact scenario?  So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 
 
Regards, 
Arunkumar D 



VL Vladimirs November 16, 2020 12:51 PM UTC

HI,  router-link is used at Vue like redirection from one component to another for a quick component loader without page refresh. if you use <a rel='nofollow' href="/home"></a>  it will take more time for rendering content at Vue then <route-lint to="/home"></route-link>


MK Mohan Kumar Ramasamy Syncfusion Team November 18, 2020 07:00 AM UTC

Hi Vladimirs, 
 
We have checked your reported query, we can achieve your requirement using Router. Please refer below code snippets. 
 
App.Vue 
 
<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> 
 
 
Router/index.js 
 
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 
    } 
  ] 
}) 
 
 
For your reference, we have prepared a sample based on this. Please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


Loader.
Up arrow icon