0

我在页面加载时添加动态子组件。当我们刷新页面时，在父级的 OnCreated 中添加子路由不会使页面工作。

因此，我正在解析页面模板（因为我在页面加载时知道它们）。

我现在正在寻找一种方法来了解与 href 匹配的路线。Vue-js 使用 path-to-regexp，我的问题很简单。

我想知道匹配的组件

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User },
    { path: '/foo/bar', component: FooBar },

  ]
})    

// Reverse of this
var matchingComponent = howDoIDothis(/foo/bar) // this should give me the matching

我需要这个，以便我可以从路径中删除，然后将子组件动态添加到父组件。

4

1 回答 1

0

你需要使用Vue路由器的router.getMatchedComponents 方法。但是，此方法需要使用所有路由完全初始化您的路由器。否则，没有办法。Vue-router 不会公开底层解析的正则表达式，您可以将href.

此外，您尝试做的并不是单页应用程序中最惯用的做事方式。一个好的做法是在一些 JS 文件中预先声明所有路由，你应该使用它来初始化你的路由器。当然，你会想要保护某些你应该使用 Route guards的路由。

最后，当您预先声明所有路由时，意味着您将所有组件预先捆绑在一个大 JS 文件中。为避免这种情况，请将您的组件包装在async包装器中，并且像 Webpack 这样的捆绑器会足够聪明，可以将捆绑包拆分为多个较小的文件。

于 2019-01-01T08:51:46.480 回答