Vue 3路由 (Vue Router) : RouterLink to属性的字符串和对象写法

在 Vue Router 中， 的 to 属性主要有两种写法：字符串写法和对象写法。

---

1. 字符串写法 (String Path)

这种方式最简单，就像写原生的 <a> 标签的 href 一样。

<RouterLink to="/dashboard">仪表盘</RouterLink><RouterLink to="/user/888">用户中心</RouterLink>

---

2. 对象写法 (Object Syntax)

这是开发中处理动态数据时的首选。注意：使用对象时，必须在 to 前加上冒号 :，表示这是一个 JS 表达式。

A. 命名路由跳转 (Named Routes) —— 最推荐

通过在路由配置中定义的 name 来跳转。这样即使你以后把 URL 从 /about-us 改成 /our-story，只要 name 还是 'About'，代码就不用动。

<RouterLink :to="{ name: 'About' }">关于我们</RouterLink>

B. 带路径参数 (Params)

配合动态路由（如 /post/:id）使用。

注意：如果使用了 params，则必须通过 name 引入路由，不能使用 path。

<RouterLink :to="{ name: 'PostDetail', params: { id: 1024 } }">阅读文章
</RouterLink>

C. 带查询参数 (Query)

对应 URL 中 ? 后面的部分（如 /search?q=vue）。

query 非常灵活，既可以配合 path 使用，也可以配合 name 使用。

<RouterLink :to="{ path: '/search', query: { keyword: 'component', page: 1 } 
}">搜索组件
</RouterLink>

---

3. 混合使用：Params + Query + Hash

有时候你需要一个非常复杂的跳转：去往某个页面，带上参数，还要锚点定位。

<RouterLink :to="{name: 'UserSetting',params: { userId: '123' },query: { mode: 'dark' },hash: '#profile'
}">修改个人资料
</RouterLink>

---

总结：该选哪种？

场景	推荐写法	理由
纯静态跳转	to="/path"	简短、直接
逻辑跳转/传参	:to="{ name: '...' }"	推荐！ 灵活，改 URL 不影响代码
搜索/筛选功能	:to="{ query: { ... } }"	自动处理 URL 编码，方便从 $route.query 取值