Question

对于这个问题，我指的是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

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

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

Answer 1

查看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文件夹的差异）。

如何定义新的路由器？

1 个答案:

关于升级的说明