Vue路由器是否可以根据传递的参数显示不同的布局?

时间:2019-09-30 08:50:59

标签: regex vue.js vue-router

我想知道Vue Router是否可以根据URL中传递的参数显示不同的布局?

考虑以下URL:

  • / admin / forms / pending
  • / admin / forms / approved
  • / admin / forms / declined
  • / admin / forms / categories

前3个链接与某些表单对象的状态有关,并将使用挂起/批准/拒绝的状态将参数作为状态过滤器传递给表单API。但是,对于类别,我希望它显示一个列出所有类别的视图。

我知道有两个不同的路由对象是可能的-一个与/admin/forms/categories匹配,另一个与/admin/form/:status匹配,但是我想知道是否可以将两个对象合并,或者有一个创建两条路线的方式,因此无论我定义它们的顺序都无关紧要(例如,如果将类别路线置于状态路线下方,则不会显示类别视图)。为此,我认为类似(/admin/forms/(:status(?!categories))的方法可以工作,但是我从Vue Router收到“无可重复”的错误。

在Vue Router中可以做些什么吗?然后,我很乐意继续定义两条不同的路线,只是想知道是否有更有效的方法?

谢谢!

=====

更新:不要问我为什么,但是我在这里引用Vuex的时候应该是Vue Router,哦!

1 个答案:

答案 0 :(得分:0)

通过将参数传递到/ admin / form /页面,您可以具有两个组件,一个组件用于前三个组件,并且具有一种类型的布局。一种用于具有不同布局的类别。 使用v-if ... v-else在它们之间切换。