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

Question

我在页面加载时添加动态子组件。在父级的 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.getMatchedComponentsmethod。但是，此方法需要使用所有路由完全初始化您的路由器。否则，没有办法。 Vue-router 不会公开底层解析的正则表达式，您可以将其与 href 进行比较。

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

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