配置子路由器时如何访问url参数

Question

我正在尝试根据 url 中提供的参数在子路由器中动态生成一些路由。

所以我的主路由器配置了该路由： mydomain.com/#/page/:page 正在加载模块“页面”

在我的模块页面中，我有一个 configureRouter 函数，它应该获取与 url 中指定的页面相关的部分，然后将它们添加到子路由器中：

public async configureRouter(config, router){
    page = ???
    sections = wait fetchPageSections(page)
    //for each section, add route in child router
}

我的问题是如何检索 :page 参数，因为这仅在 activate() 函数中可用（如果我理解得很好），该函数将在 configureRouter() 之后调用。但是，由于该部分路由已经在父路由器中“匹配”，我认为应该有一种方法可以在 configureRouter 函数中检索它。

谢谢。

Answer 1

不知道有没有办法在configureRouter()方法中检索:page参数，因为据我所知，此时新路由还没有触发。

您可以在created() 方法中检索:page 参数。

created() {
   let page = this.router.parentInstruction.params.page;
   // do something and add routes
   //this.router.addRoute({ route: "test", moduleId: "test", nav: true, title: "test" });
   //this.router.refreshNavigation();
}

第二种选择是使用全局对象来保存所需的参数。你可以在视图组件的constructor() 方法中注入这个对象。然而，这将是一个过度杀伤和不安全的使用。我认为这不是一个好主意。

第三种选择，也是我认为最简单的选择，是使用mapUnknownRoutes() 动态路由：

router.configure(config => {
  config.mapUnknownRoutes(instruction => {
     //read the instruction.fragment to get
     //you can return a promise and make async requests
     return instruction;
   });
});

我希望这会有所帮助！

Answer 2

configureRouter(config, router) 传入的路由器是子路由器。幸运的是，它有一个 parent 属性，可以为您提供所需的内容。

router.parent.currentInstruction.params.page 应该给你你正在寻找的东西：来自父路由器的page 参数。