Vue树导航（pluggin）如何映射路由

Question

我已使用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>

Answer 1

尝试更改路由器文件中的某些内容，对我来说效果很好：

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

赞：

class User extends Authenticatable {
    protected $appends = ['fullname'];
}

最重要的是，使用以下命令加载 VueRouter （如果您尚未这样做，则为 ）：

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

希望有帮助！