Question

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

因此，我正在解析页面模板（正如我在页面加载时所知道的那样）。

我现在正在寻找一种方法来知道与href匹配的路线。 Vue-js使用正则表达式路径，我的问题很简单。

我想知道匹配的组件

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

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

Answer 1

您需要使用Vue路由器的router.getMatchedComponents method。但是，此方法需要使用所有路由对路由器进行完全初始化。否则，没有办法。 Vue-router不会公开基础解析的正则表达式，您可以将它们与您的href进行比较。

此外，您尝试执行的操作不是在单页应用程序中最常见的操作方式。一个好的做法是在某个JS文件中预先声明所有路由，然后使用该JS文件初始化路由器。当然，您将希望保护某些应使用路卫的路线。

最后，当您预先声明所有路径时，意味着您将所有组件都预先捆绑在一个大JS文件中。为避免这种情况，将组件包装在async包装器中，像Webpack这样的捆绑器很聪明，可以将捆绑包分割成多个较小的文件。

路径到正则表达式查找与路由匹配的正则表达式

1 个答案: