使用Vue路由器设置变量而不是组件可见性?

时间:2018-11-26 10:15:17

标签: vue.js vue-router

我想使用url参数在Vue应用程序中设置变量。我认为vue-router对此很有用,但似乎都是为了显示/隐藏router-view组件内部的组件。

我正在考虑在路由器视图中使用不带模板的单个组件来设置这样的变量:

export default new Router({
  routes: [
    {
      path: '/preferences',
      name: 'Preferences',
      component: Navigator,
      props: { preferencesVisible: true }
    },
    {
      path: '/info',
      name: 'Info',
      component: Navigator,
      props: { infoVisible: true, preferencesVisible: false }
    }
  ]
})

这样,我可以添加其他逻辑来定义可见的组件以及其他内容(例如,可以通过链接共享的应用程序参数)。

是否有不以这种方式使用vue-router的理由?有更好的解决方案来实现这一目标吗?

1 个答案:

答案 0 :(得分:0)

我的问题是基于对VueRouter的理解不正确。无需像我建议的那样添加额外的导航器组件。

要实现问题的目的,请添加路由器视图并使用路由器控制其内容和道具。毕竟,我们需要模板中的某些内容来控制路由器。如果需要,内容可以是一个永远不会隐藏的组件。为了实现路由器中的所有路径都引用该路由器视图(或至少:该路由器视图的所有路由器路径)。