Vue Router中获取路由参数d两种方式：$route.query和$route.params

id:this.$route.query.username 和 id:this.$route.params.id 都是 给 id 赋值当前路由的参数，但核心区别是：参数的「传递形式」和「路由规则」完全不同（对应 Vue Router 两种参数传递方式）。

下面用拆解两者的含义和使用场景：

一、id: this.$route.query.username ------ 取「URL 查询参数」（?xxx=xxx 形式）

1. 核心含义

$route.query 专门获取 URL 中 ? 后面的「查询参数」（类似 HTTP 的 GET 参数），this.$route.query.username 就是取查询参数里 username 对应的值，再把这个值赋值给 id。

2. 直观示例

（1）URL 形式（参数跟在？后）

假设当前页面的 URL 是：http://localhost:8080/home?username=小儿砸&age=20

（2）代码中取值

// 此时 this.$route.query 的结构是：{ username: '小儿砸', age: '20' }
id: this.$route.query.username // 最终 id = '小儿砸'

（3）路由规则（无需特殊配置）

查询参数不需要在路由规则里定义，直接跳转即可：

// 路由配置（无特殊处理）
const routes = [
  { path: '/home', component: HomeView }
];

// 跳转时传查询参数（两种写法）
this.$router.push('/home?username=小儿砸'); 
this.$router.push({ path: '/home', query: { username: '小儿砸' } });

3. 特点

• 参数显式暴露在 URL 中（用户能看到）；
• 刷新页面参数不会丢失；
• 无需在路由规则中定义，灵活（适合可选参数、非核心参数）。

---

二、id: this.$route.params.id ------ 取「路由动态参数」（/xxx/:id 形式）

1. 核心含义

$route.params 专门获取「路由动态路径参数」（路由规则中用 :参数名 定义的部分），this.$route.params.id 就是取动态路径中 id 对应的值，再赋值给 id。

2. 直观示例

（1）URL 形式（参数嵌在路径中）

假设当前页面的 URL 是：http://localhost:8080/user/123

（2）代码中取值

// 此时 this.$route.params 的结构是：{ id: '123' }
id: this.$route.params.id // 最终 id = '123'

（3）路由规则（必须提前定义动态参数）

动态参数必须在路由规则里用 :参数名****声明，否则取不到：

// 路由配置（必须定义 :id）
const routes = [
  { path: '/user/:id', component: UserView } // :id 是动态参数占位符
];

// 跳转时传动态参数（两种写法）
this.$router.push('/user/123'); 
this.$router.push({ name: 'UserView', params: { id: 123 } }); // 推荐用 name 跳转

3. 特点

• 参数嵌在 URL 路径中（不是？后面，更美观）；
• 刷新页面参数不会丢失；
• 必须在路由规则中定义，强制传参（适合核心参数，比如用户 ID、商品 ID）；
• 如果路由规则定义了 :id 但跳转时没传，会导致路由匹配失败（页面 404）。

---

三、核心区别对比表

特征	$route.query.username	$route.params.id
URL 形式	/home?username=小儿砸	/user/123
路由规则	无需定义，直接用	必须定义 /:id 占位符
参数是否可见	可见（? 后）	可见（路径中），但比 query 隐蔽一点
跳转方式	query: { username: '小儿砸' }	params: { id: 123 }（需配合 name）
可选 / 必填	可选（不传也能访问页面）	必填（不传则路由匹配失败）
适用场景	非核心参数（如筛选条件、页码）	核心参数（如 ID、唯一标识）

---

四、完整代码示例

1. 路由配置（src/router/index.js）

**UserView**是你在 路由配置中给 /user/:id 这条路由规则定义的 name 属性值

说明：name: 'UserView' 的作用

1. 路由的 "唯一别名"：

• name: 'UserView' 是给 /user/:id 这条路由起的「名字」，相当于给路径 /user/:id 绑定了一个 "别名"。
• 跳转时用 name: 'UserView' 代替直接写路径，就算后续修改路径（比如把 /user/:id 改成 /member/:id），跳转代码也不用改，解耦路径和跳转逻辑。

---

2. component: UserView 和 name: 'UserView' 的区别：

• component: UserView：表示这条路由要渲染的组件是你导入的 UserView.vue（组件名）；
• name: 'UserView'：是路由规则的名称（可以自定义，比如改成 name: 'User' 也可以），和组件名可以相同（方便记忆），但不是必须一致。

import Vue from 'vue';
import Router from 'vue-router';
import HomeView from '@/views/HomeView';
import UserView from '@/views/UserView';

Vue.use(Router);

export default new Router({
  routes: [
    { 
      path: '/home', 
      name: 'HomeView', 
      component: HomeView 
    },
    { 
      path: '/user/:id', // 动态路径（:id 是参数占位符）
      name: 'UserView',  // ✅ 这里！UserView 是这条路由的「名称标识」
      component: UserView // 对应要渲染的组件（上面导入的 UserView.vue）
    } 
  ]
});

2. 跳转页面（比如在按钮点击事件中）

// 跳转到 Home 页，传 query 参数
goToHome() {
  this.$router.push({
    path: '/home',
    query: { username: '小儿砸' } // 传查询参数
  });
},

// 跳转到 User 页，传 params 参数
goToUser() {
  // 写法1：直接写路径（硬编码路径，不推荐）
  //this.$router.push('/user/123'); 
  // 写法2：用路由 name + params（推荐，解耦路径）
  this.$router.push({ 
    name: 'UserView', // 对应路由配置里的 name: 'UserView'
    params: { id: 123 } // 对应路由路径里的 :id 占位符
});
}

为什么推荐 name + params 跳转？

举个例子：如果后续产品要求把 /user/:id 改成 /member/:id，只需修改路由配置的 path，跳转代码完全不用动：

如果用写法 1（/user/123），就需要把所有跳转的地方都改成 /member/123，维护成本高。

// 路由配置修改
const routes = [
  {
    path: '/member/:id', // 路径改了
    name: 'UserView',    // name 不变
    component: UserView
  }
];

// 跳转代码无需修改，依然生效
this.$router.push({ name: 'UserView', params: { id: 123 } });

3. 取值使用（组件中）

// HomeView.vue 中取 query 参数
mounted() {
  const id = this.$route.query.username;
  console.log(id); // 输出：小儿砸
},

// UserView.vue 中取 params 参数
mounted() {
  const id = this.$route.params.id;
  console.log(id); // 输出：123
}

---

五、易错点提醒

1. params 参数跳转时，不能用 path 配合 params （会失效），必须用 name：

   // 错误写法 ❌
   this.$router.push({ path: '/user', params: { id: 123 } });
   // 正确写法 ✅（要么 name + params，要么直接写完整路径）
   this.$router.push({ name: 'UserView', params: { id: 123 } });
   this.$router.push('/user/123');

2. query 参数的值默认是字符串类型，如果需要数字，要手动转换：

   const age = Number(this.$route.query.age); // 把 '20' 转成 20

3. 如果路由规则没定义 :id，this.$route.params.id 会返回 undefined。

   // 路由配置
   { path: '/user/:id', name: 'UserDetail', component: UserView }
   // 跳转代码
   this.$router.push({ name: 'UserDetail', params: { id: 123 } });

4. 没定义 name: 'UserView' 就用会报错 ：如果路由配置里没有 name: 'UserView'，执行 this.$router.push({ name: 'UserView', ... }) 会报 Error: Named Route 'UserView' is not defined。