对比 Vue 2 和 Vue 3 中获取路由信息与执行导航的两种方式

路由的二个核心需求

• 无论使用哪种框架，前端路由通常涉及两类操作

  “我在哪？” —— 获取当前 URL、参数、查询等信息

  “我要去哪？” —— 编程式跳转到其他页面

🔹 Vue 2：Options API + $route / $router

提示

• 在 Vue 2 中，我们通过组件实例上的 $route 和 $router 属性访问路由信息。

获取当前路由信息（$route）

// MyComponent.vue (Vue 2)
export default {
  mounted() {
    console.log(this.$route.path);        // "/mine"
    console.log(this.$route.query.tab);   // "settings"
    console.log(this.$route.params.id);   // "123"
  }
}

重要

• $route 是一个只读对象，包含当前激活的路由详情

• 可用于根据 URL 参数动态渲染内容、高亮导航栏等

执行路由跳转（$router）

提示

• $router 是路由器实例，提供 .push()、.replace()、.go() 等方法。
• 用于按钮点击、表单提交后的页面跳转

export default {
  methods: {
    goToMine() {
      this.$router.push('/mine');
    },
    goBack() {
      this.$router.go(-1);
    }
  }
}

在 Vue 2 中，这两个属性在任何组件中都可通过 this 直接访问

🔸 Vue 3：Composition API + useRoute / useRouter

提示

Vue 3 引入了 <script setup> 和组合式函数（Composables），Vue Router 4 也随之提供了 useRoute 和 useRouter。

获取当前路由信息（useRoute）

重要

• useRoute() 返回一个响应式的只读路由对象。
• 支持在 watch、computed 或模板中使用，自动随路由变化更新。

<!-- MyComponent.vue (Vue 3) -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.path)        // "/mine"
console.log(route.query.tab)   // "settings"
console.log(route.params.id)   // "123"
</script>

执行路由跳转（useRouter）

重要

• useRouter() 返回路由器实例，功能与 Vue 2 的 $router 完全一致
• 方法如 .push()、.replace()、.back() 等均可使用

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goToMine = () => {
  router.push('/mine')
}

const goBack = () => {
  router.go(-1)
}
</script>

总结

功能	Vue 2 (Options API)	Vue 3 (Composition API)
获取当前路由	this.$route	useRoute()
路由跳转	this.$router.push(...)	useRouter().push(...)
是否响应式	（需 watch $route）	（天然响应式）
使用位置	methods、mounted 等选项内	<script setup> 或 setup() 函数内
类型支持	需额外配置	更好地集成 TypeScript

版权所有

版权归属：念宇

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)