创建用于表导航的面包屑VUEJS

时间:2018-10-26 10:32:58

标签: javascript vuejs2 breadcrumbs

我是一名初级开发人员,目前在面包屑方面遇到大麻烦。

对于此应用程序,我正在使用VueJS,而我遇到的问题如下:

*用户单击“表”,然后发送到“表”页面。

-在“表格”页面上,他有一张大桌子,可以在其中单击各个列以显示一个新表格,其中包含与他单击的列有关的数据。

*为此,我使用的是相同的组件,因此我不使用路由器,而是使用v-show,因为我不想重新渲染表。

以下是我的问题,当他导航到不同的表(即table / holdingList / entrepriseList / clientList ..)时,我必须做一个面包屑。并且它们必须是可单击的,以便我能够创建一个将数据注入表中或简单地“显示”数据并关闭其他数据的函数。

任何人都可以给我简要介绍如何执行此操作吗?对不起,如果它看起来微不足道。我已经花了几天的时间,我的脑子变得糊涂了……

1 个答案:

答案 0 :(得分:0)

我将从最简单的解决方案开始实施:

  • 每个v-show将取决于不同的数据对象。然后,您的面包屑有一个@click方法,该方法会将每个v-show数据对象设置为false。为该方法提供一个参数,该参数具有要显示的数据对象的名称,并将其显示为true。

上一个答案足以使其正常工作。以更可维护的方式获得相同结果的其他方法是:

  • 创建一个名为activeTable的数据对象,并将您的v-show变成v-if。当您单击面包屑元素时,会将activeTable数据对象更改为您要显示的表的标识符。之后,您的vue-if仅检查activeTable === thisTableId是否正确。其中thisTableId是每个表的标识符。

  • 如果您的表共享相似的布局,则您可能特别想开始熟悉Vuex。这样,您将存储数据,而无需再次请求数据。如果用于填充表的数据来自API,这将很有用。

  • 最后,在 SPA 架构上,没有实际的重新渲染,因此您可能还需要研究一下。

请阅读发布答案的准则,因为它们要求您至少在自己的身边付出一些努力。祝你好运!