AngularJS ui-view嵌套路由在父级上带有url参数答案

【问题标题】：AngularJS ui-view nested routes with url parameters on parentAngularJS ui-view嵌套路由在父级上带有url参数
【发布时间】：2022-08-22 18:24:49
【问题描述】：

我正在尝试在我的项目中使用 angular ui-router，并且遇到了一个关于在添加子路由时维护父路由中的 url 参数的问题......

我有一个带有以下路线的设置页面：/settings/:messageCode/:status

现在我需要添加一个根据路线变化的模板，所以新的显示如下：https://imgur.com/a/dHKzVD6

<div>
   <div id=\"sidebar\">...</div>
   <div id=\"topbar\">...</div>

   <div ui-view>
      <!-- This is the variable content depending on the route -->
   </div>

</div>

我需要添加的新路线如下：

/设置/工作室
/设置/付款

这是我的嵌套路由代码

...
$stateProvider
   .state(\"register\", {...})
   .state(\"settings\", {
        url: \"/settings\", // the objective is to keep the previous route \"/status/:messageCode/:status\"
        templateUrl: \'settings/settings.view.html\',
        controller: \'SettingsCtrl as vm\',
        params: {
          messageCode: {
            value: null,
            squash: true,
            dynamic: true,
          },
          success: {
            value: null,
            squash: true,
          },
   })
   .state(\"settings.studio\", {
        url: \"/studio\",
        templateUrl: \'template-tab-studio.html\',
        controller: \'SettingsCtrl as vm\',
   })
   .state(\"settings.payments\", {
        url: \"/payments\",
        templateUrl: \'template-tab-payments.html\',
        controller: \'SettingsCtrl as vm\',
   })

目前，路由工作正常，但我丢失了父组件（设置主页）上的 URL 参数，同时添加了它的新子组件，而无需将 url 参数添加到所有子组件。

必须将 URL 参数添加到所有子项的问题在于，我需要添加更多视图，因此必须维护所有这些路由会使事情变得复杂。

有没有办法在添加子项时将原始路由保留在父级（/settings/:messageCode/:status）中，以便他们也可以接收该参数？

目标路由如下所示：/settings/{dinamicView}/:messageCode/:status。

标签： angularjs routes uiview url-parameters

【解决方案1】：

无法获取您的意思是什么参数，将变量传递给您可以使用的子路由解决

保留以前的路线更改 url: "/settings" 到 url: "settings"

【讨论】：