### [TypeScript 里动态改 href：路径从哪来](https://www.huociguo.com/article/1641)

**Published:** 2026-10-01T13:14:39

**Author:** 米了

**Excerpt:** 把模块路径直接写进链接地址，点击后跳转到不存在的页面。模块路径由打包工具解析，浏览器只按 URL 规则处理地址…

把模块路径直接写进链接地址，点击后跳转到不存在的页面。模块路径由打包工具解析，浏览器只按 URL 规则处理地址。

![屏幕上显示的高亮脚本代码](https://api.huociguo.com/wp-content/uploads/2026/10/e12.jpg)

链接地址必须是浏览器可解析的路径

## 三类地址

| 类型  | 示例  | 能否用作链接地址 |
| --- | --- | --- |
| 模块路径 | src/app/page | 不能  |
| 站点相对路径 | /app/page | 能   |
| 绝对地址 | https://example.com | 能   |

## 做法一：替换字符串

```
const raw = 'src/app/page.tsx';
const href = raw.replace(/^src/, '').replace(/\.tsx$/, '');
link.setAttribute('href', href);
```

适合路径规则固定的场景，规则变化时需要同步改正则。

## 做法二：直接给站点路径

```
const routes: Record<string, string> = {
  home: '/',
  about: '/about'
};
link.href = routes.about;
```

用映射表把标识换成真实地址，规则集中在一处，改动只动表。

## 类型处理

```
const el = document.querySelector<HTMLAnchorElement>('#link');
if (el) el.href = href;
```

查询选择器带泛型参数后返回值即为具体元素类型，不需要额外断言。元素可能不存在时先判空，避免运行时报错。

## 注意点

-   不要直接拼接外部输入作为地址，避免把不可控内容带进跳转目标。
-   相对路径按当前页面解析，改完地址后确认基准是否符合预期。
-   跨站跳转需要同步补充 target 与安全属性。

**Tags:** href属性, 属性替换, 模块路径, 类型断言, 链接地址

**Categories:** HTML5

---