javascript - 如何定义新路由器？

对于这个问题，我指的是https://github.com/epicmaxco/vuestic-admin中的vuestic-admin模板

这个模板对我来说是最合适的模板。但是，我想进行一些更改。确切地说，我想添加一个新页面，但不希望此页面显示在侧栏中。为此，我需要定义新的路由器。我的问题是：我不太了解如何添加新路由器。

Hier是我所做的：

首先，我在.vue中创建了一个components/contact/Contact.vue文件。其代码：

<template>
  <div class="contact">
    <div class="row">
      <div class="col-md-12">
        <p>contact</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default { name: 'contact' }
</script>

<style lang="scss"></style>

其次，我在store/modules/contact.js中添加了一个新的.js文件。其代码：

import lazyLoading from './lazyLoading'

export default {
  name: 'Contact',
  path: '/contact',
  component: lazyLoading('contact/Contact'),

  meta: {
    default: false,
    title: 'menu.contact',
    iconClass: 'vuestic-icon vuestic-icon-extras'
  }
}

第三，在store/modules/menu/index.js文件中，通过添加state更改了pages定义：

import contact from './contact'

const state = {
  pages: [
    contact
  ],

  items: [
    dashboard,
    statistics,
    forms,
    tables,
    ui,
    extra,
    auth
  ]
}

第四，在router/index.js文件中，进行了以下更改：

export default new Router({
  routes: [
    ...generateRoutesFromMenu(menuModule.state.items),
    {path: '*', redirect: { name: getDefaultRoute(menuModule.state.items).name }},
    ...generateRoutesFromMenu(menuModule.state.pages),
    {path: '*', redirect: { name: getDefaultRoute(menuModule.state.pages).name }}
  ]
})

通过编译以上更改，我得到了控制台错误：Uncaught TypeError: Cannot read property 'name' of undefined

根据我的知识（和我的猜测），问题应该出在第四步。

有人可以告诉我解决这个问题的方法吗？非常感谢！

最佳答案

查看getDefaultRoute()的源here，

function getDefaultRoute (menu = []) {
  let defaultRoute

  menu.forEach((item) => {
    if (item.meta.default) {
      defaultRoute = item
    } else if (item.children) {
      let defaultChild = item.children.find((i) => i.meta.default)
      defaultRoute = defaultChild || defaultRoute
    }
  })

  return defaultRoute
}

我会说你不需要线

{path: '*', redirect: { name: getDefaultRoute(menuModule.state.pages).name }}

因为对于联系人，您已设置default: false并且没有子代，这意味着该函数返回null（因此会收到错误消息）。

该框架似乎假设菜单项只有一个列表，并且其中一个菜单项被设置为默认菜单项。但是我认为您的方法应该有效。

唯一的潜在问题是您似乎正在更改框架代码，这意味着升级到下一版本的框架时需要做更多的工作。



有关升级的注意事项

我只运行了基本安装，然后查看项目，我必须修改有关潜在升级问题的说明。

本质上，这是模板而不是框架。不同之处在于，安装程序会在项目的src文件夹中创建启动程序代码，您可以自由修改该代码并将其保存到github存储库中。

在将来某个日期在项目上运行npm install时，node_modules下没有可以覆盖路由器更改的软件包。

如果epicmaxco创建要使用的模板的新版本，则只需创建一个新项目，然后将您先前在src中所做的更改复制到新项目中（也许运行旧旧src文件夹的差异）。

关于javascript - 如何定义新路由器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49600915/