Navigation arborescente Vue (pluggin) : comment cartographier les itinéraires ?

Question

J'ai utilisé vue-tree-navigation pour mettre en œuvre cette Menu de navigation arborescent . Lorsque je clique sur un élément de menu (par exemple : Créer un élément), il devrait être dirigé vers le composant de création d'élément. Mais il ne fait qu'imprimer le nom de l'itinéraire dans la barre de navigation et ne le dirige vers aucun endroit.

http://localhost:8080/inside#item

Comment puis-je résoudre ce problème ?

c'est mon fichier routes.js

const routes = [

  { path: "/", component: welcome },
  {
    path: "/inside",
    component: inside,
    name: inside,
    children: [
      { path: "/category", component: category, name: category },
      { path: "/sub-category", component: subCategory, name: subCategory },
      { path: "/item", component: item, name: item }
    ]
  }
];

Voici mon composant

<template>
    <div class="inside">
        <div class="sideBar"><vue-tree-navigation :items="items" /></div>
        <div class="content"><router-view></router-view></div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      items: [ 
              { name: 'Item Master', route: 'inside', children: [          // /about
                { name: 'Create item category', element: 'category', },
                { name: 'Create item sub category', element: 'sub-category', },
                { name: 'Create item', element: 'item', },

              ]},
            ],
    };
  }
};
</script>

Answer 1

Essayez de changer un peu de choses dans le fichier du routeur, cela fonctionne bien pour moi :

• Les composants commencent en majuscules (c'est une convention).
• Le nom avec '''
• Supprimez le / dans le chemin

Comme ça :

path: "inside",
component: Inside,
name: "inside",
children: [
  { path: "category", component: Category, name: 'category' },
  { path: "sub-category", component: SubCategory, name: 'subCategory' },
  { path: "item", component: Item, name: 'item' }
]

Et le plus important, la charge ( si vous ne le faites pas déjà ) le VueRouter avec :

var router = new VueRouter({
const routes = [
...
]
});

J'espère que cela vous aidera !