path-to-regexp查找与路由匹配的正则表达式

Question

我在页面加载时添加动态子组件。在parent的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 

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

Answer 1

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

而且，您尝试做的不是，这是在单页面应用程序中最常用的方式。一个不错的做法是在某个JS文件中预先声明所有路由，您应该使用该文件来初始化路由器。当然，您会想要保护某些路由，对于这些路由，您应该使用路由守卫。

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