Vue树导航（插件）如何映射路线答案

【问题标题】：Vue tree navigation (pluggin) how to map routesVue树导航（插件）如何映射路线
【发布时间】：2018-11-06 16:40:07
【问题描述】：

我使用vue-tree-navigation 来实现这个树形导航菜单。当我点击一个菜单项（例如：- 创建项）时，它应该路由到创建项组件。但它只是在导航栏中打印路线的名称，并没有路由到任何地方。

http://localhost:8080/inside#item

我该如何解决这个问题？

这是我的 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 }
    ]
  }
];

这是我的组件

<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>

【问题讨论】：

你的子菜单项没有路由属性，点击菜单时你要去哪里？

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

尝试更改路由器文件中的一些内容，它对我很有效：

组件以大写字母开头（只是一个约定）
带''的名字
删除路径中的/

像这样：

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' }
]

最重要的是，加载（如果你还没有这样做）VueRouter：

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

希望对你有帮助！

【讨论】：