写法1：字符串形式

简洁，适合简单路径

语法

<!-- 绝对路径（推荐，/开头） -->
<router-link to="/user">用户页面</router-link>

<!-- 带参数路径（拼接在url上，query参数） -->
<router-link to="/user?id=1&name=test">用户</router-link>

✅ 特点

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

❌ 局限

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

<!-- 不推荐，字符串拼接容易出错 -->
<router-link :to="'/user/' + uid"></router-link>

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

写法2：对象形式

功能最全，推荐复杂场景

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

使用【路径 path】 + query 参数

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

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

路由配置（router/index.js）

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

跳转：

<!-- url: /user/100 -->
<router-link :to="{
  name: 'User',
  params: { uid: 100 }
}">个人主页</router-link>

⭐重要规则：
path 和 name 不要同时写！如果同时存在，params 会直接失效！

📌 区分 params vs query

两种写法对比

字符串 to="/xxx"

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

对象 :to="{...}"

• 必须加 :
• 支持 path + query
• 支持 name + params（动态路由最优解）
• 功能强大，适合带参数、动态跳转

原文出处：/show_1GW3mXRAZBfq.html