Vue Options API怎么使用 $router 和 $route 操作路由跳转-Vue.js-PHP中文网

$router用于发起跳转，$route用于读取当前路由信息；前者提供push/replace/go等方法，后者为只读响应式对象，含params/query/path等属性。

vue options api怎么使用 $router 和 $route 操作路由跳转

在 Vue 2 的 Options API 中，$router 和 $route 是 Vue Router 自动注入到每个组件实例上的两个核心对象：前者用于**发起跳转操作**，后者用于**读取当前路由信息**。它们不是手动引入的，而是通过 Vue Router 插件自动挂载到 this 上，直接可用。

使用 $router 实现页面跳转

this.$router 是整个应用的路由实例，相当于一个“导航控制器”，提供 push、replace、go 等方法。

router.push()：最常用，向历史栈添加新记录，支持后退
可传字符串路径：this.$router.push('/user')
可传对象（推荐）：this.$router.push({ name: 'UserProfile', params: { id: 123 } }) 或 this.$router.push({ path: '/article', query: { id: 456 } })
router.replace()：替换当前历史记录，不会留下返回入口
例如登录成功后跳首页且不允许回退：this.$router.replace({ name: 'Home' })
router.go(n)：在历史记录中前进或后退 n 步
this.$router.go(-1) 相当于浏览器后退按钮；this.$router.go(1) 前进

使用 $route 获取当前路由参数和路径

this.$route 是只读的响应式对象，反映当前激活路由的完整状态，常用于取参、判断路径或做条件渲染。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

获取动态路由参数（如 /user/:id）：this.$route.params.id
获取查询参数（如 /search?keyword=vue&page=2）：this.$route.query.keyword、this.$route.query.page
获取匹配的路径和名称：this.$route.path（如 "/user/123"）、this.$route.name（如 "UserProfile"）、this.$route.fullPath（含 query 的完整路径）
配合路由元信息做权限判断：if (this.$route.meta.requiresAuth && !isLogin) { this.$router.push('/login') }

常见组合用法与注意事项

实际开发中，$router 和 $route 经常配合使用，比如根据当前路径决定跳转目标，或跳转后从新路由取参。

跳转前校验权限：if (this.$route.name === 'Admin' && !hasAdminRole()) { this.$router.push('/forbidden') }
带参跳转 + 页面内取参闭环：
从列表页点击跳详情页：this.$router.push({ name: 'ArticleDetail', params: { id: item.id } })
详情页中立即读取：mounted() { console.log('文章ID:', this.$route.params.id) }
注意 params 在 path 模式下不生效，必须用 name；query 则无论 path 还是 name 都支持
页面刷新后 params 会丢失（因不体现在 URL 中），敏感数据建议改用 query 或 Vuex/Pinia 持久化

声明式跳转：router-link 作为补充

虽然不属于 $router/$route 调用，但 <router-link></router-link> 是 Options API 中最轻量的跳转方式，本质是 $router.push() 的模板语法糖：

基础写法：<router-link to="/home">首页</router-link>
对象写法（支持 params/query）：<router-link :to="{ name: 'User', params: { id: 100 }, query: { tab: 'profile' } }">用户页</router-link>
添加 replace 属性实现替换行为：<router-link to="/login" replace>登录</router-link>
通过 active-class 控制选中样式，方便做导航高亮