Angular11点击菜单生成含%2F编码URL导致路由跳转失效问题

问题根源 #

你的路由跳转异常是由routerLink的使用方式错误导致的：
routerLink使用数组语法传参时，会将数组的每一项视为独立的路径片段，自动对片段内的/做URL编码转为%2F。
你在menu-items.ts中配置的state字段自带斜杠前缀（如/pages/namespaces），和模板中的[routerLink]="['/', menuitem.state]"组合后，Angular会将/pages/namespaces当作单一路径片段处理，把内部的/全部编码，最终生成错误的URL。

修复方案（二选一即可） #

方案1：修改菜单配置的state字段 #

将menu-items.ts中所有state值的开头斜杠去掉：

{
  state: 'pages/dashboard1', // 移除开头的/
  name: 'MENU-ITEMS.dashboard',
  type: 'link',
  icon: 'dashboard'
},
{
  state: 'pages/namespaces', // 移除开头的/
  name: 'MENU-ITEMS.FUNCTIONALITY.projects',
  type: 'link',
  icon: 'view_in_ar'
}

方案2：修改模板的routerLink写法 #

不改动菜单配置的前提下，将vertical-sidebar.component.html中数组格式的routerLink改为直接传入字符串：
原代码：

[routerLink]="['/', menuitem.state]"

修改为：

[routerLink]="menuitem.state"

因为你的state本身已经是完整的绝对路径，直接传字符串不会触发路径片段的编码逻辑。

额外注意事项 #

你当前的pages.routing.ts中没有配置namespaces对应的路由规则，修复编码问题后需要补充该路由配置，否则访问/pages/namespaces会触发通配符路由重定向到/pages。

内容的提问来源于stack exchange，提问作者Kévin