vue中$route和$router的区别是什么

# Vue中$route和$router的区别是什么

在Vue.js开发中，路由管理是构建单页面应用（SPA）的核心功能。`$route`和`$router`是Vue Router提供的两个重要对象，初学者容易混淆它们的作用。本文将深入解析二者的区别，并通过代码示例帮助开发者正确使用它们。

---

## 一、基础概念

### 1. $router
`$router`是**Vue Router的实例**，全局唯一，提供路由跳转、导航守卫等操作方法。  
通过`this.$router`访问，常用方法包括：
- `push()`：导航到新路由（保留历史记录）
- `replace()`：替换当前路由（无历史记录）
- `go()`：前进/后退历史记录

```javascript
// 编程式导航示例
this.$router.push('/home')       // 跳转到/home
this.$router.replace('/login')  // 替换当前路由
this.$router.go(-1)             // 返回上一页

2. $route

$route是当前激活的路由信息对象，包含路径、参数、查询参数等数据。
通过this.$route访问，常用属性包括： - path：当前路径（如/user/1） - params：动态路由参数（如{ id: '1' }） - query：URL查询参数（如?name=vue） - meta：路由元信息

// 获取路由参数示例
const userId = this.$route.params.id
const searchQuery = this.$route.query.q

二、核心区别对比

三、使用场景详解

1. $router的典型应用

编程式导航

// 带参数跳转
this.$router.push({
  path: '/user',
  query: { page: 2 }
})

// 命名路由+params
this.$router.push({
  name: 'user',
  params: { id: 123 }
})

导航守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    next('/login')
  } else {
    next()
  }
})

2. $route的典型应用

动态路由匹配

<template>
  <div>用户ID: {{ $route.params.id }}</div>
</template>

<script>
export default {
  watch: {
    '$route'(to, from) {
      // 响应路由变化
    }
  }
}
</script>

查询参数处理

created() {
  if (this.$route.query.ref === 'wechat') {
    this.trackSource('wechat')
  }
}

四、常见问题解答

Q1：为什么修改$route.params不生效？

$route是只读的，直接修改参数无效。正确做法是通过$router.push更新路由：

// 错误做法
this.$route.params.id = 456 // 无效！

// 正确做法
this.$router.push({ params: { id: 456 } })

Q2：如何在模板中访问路由？

Vue模板中可直接使用$route和$router：

<button @click="$router.back()">返回</button>
<p>当前路径: {{ $route.path }}</p>

Q3：路由变化时如何监听？

两种方式： 1. 使用watch监听$route

watch: {
  '$route'(to, from) {
    console.log('路由变化', to.path)
  }
}

1. 使用组件内导航守卫beforeRouteUpdate

五、最佳实践建议

1. 明确分工：

   • 需要导航时用$router
   • 需要读参数时用$route

2. 避免直接修改：

   • 永远不要直接修改$route的属性

3. 组件解耦：

   • 通过props接收路由参数：

   const router = new VueRouter({
    routes: [
      { path: '/user/:id', component: User, props: true }
    ]
   })
   

4. TypeScript支持： “`typescript import { Route, VueRouter } from ‘vue-router’

@Component export default class User extends Vue { @Prop() readonly id!: string

 get route(): Route {
   return this.$route
 }

}

---

## 总结

`$router`和`$route`是Vue Router生态中互补的两个核心对象：
- **`$router`** 是"指挥官"，负责路由的跳转控制
- **`$route`** 是"情报员"，提供当前路由的详细信息

理解它们的区别能帮助开发者更高效地实现路由管理，避免常见的误用问题。