vue2教程：router-link标签，to属性的两种写法总结（字符串、对象）-马育民老师

# 写法1：字符串形式

简洁，适合简单路径

### 语法
```vue

<router-link to="/user">用户页面</router-link>

<router-link to="/user?id=1&name=test">用户</router-link>
```

### ✅ 特点
1. 值为**路由地址字符串**，和浏览器地址栏一致
2. 只能传递 **query 参数**（显示在 url `?` 后面）
3. **无法直接传递 params 动态路由参数**（不能写命名路由）
4. 简单页面跳转首选，代码简短

### ❌ 局限

动态路由 `/user/:uid` 想要传参，只能手动拼接字符串，麻烦易错：
```vue

<router-link :to="'/user/' + uid"></router-link>
```

> ⚠️ 注意：不加 `:` 直接写 to="/xxx" 是静态字符串；
> 若变量拼接必须加 `v-bind:` → `:to`

# 写法2：对象形式

功能最全，推荐复杂场景

**必须加 `:to`（v-bind绑定）**

### 使用【路径 path】 + query 参数
```vue

<router-link :to="{
  path: '/user',
  query: { id: 1 }
}">用户</router-link>
```

### 使用【命名路由 name】 + params 参数（动态路由）

路由配置（router/index.js）

```js
{
  path: '/user/:uid', // 动态路由
  name: 'User',
  component: User
}
```

跳转：

```vue

<router-link :to="{
  name: 'User',
  params: { uid: 100 }
}">个人主页</router-link>
```
> ⭐重要规则：
> **path 和 name 不要同时写！如果同时存在，`params` 会直接失效！**

## 📌 区分 params vs query
| 参数类型 | 书写方式 | URL表现 | 刷新页面 |
|--------|--------|--------|--------|
| query | path/name + query | `/user?id=1` | 参数保留 |
| params | name + params（动态路由） | `/user/1` | 参数保留（路由必须声明`:uid`） |
| params | name+params，路由未配置动态段 | url不显示参数，**刷新丢失**（大坑！） |

# 两种写法对比

### 字符串 `to="/xxx"`
- 无需 `:`（静态）；拼接变量需要 `:to="字符串表达式"`
- 仅支持 url query
- **不支持 params**

### 对象 `:to="{...}"`
- **必须加 `:`**
- 支持 `path + query`
- 支持 `name + params`（动态路由最优解）
- 功能强大，适合带参数、动态跳转

原文出处：http://malaoshi.top/show_1GW3mXRAZBfq.html