vue.js - Vue树导航（插件）如何映射路线

Question

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

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.jsvuejs2vue-componentvue-router

Answer 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 = [
...
]
});

希望能帮助到你！