vue中通过路由跳转的三种方式

最新推荐文章于 2025-06-20 21:46:53 发布

monikaH

最新推荐文章于 2025-06-20 21:46:53 发布

阅读量8.9w

点赞数 18

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue router

本文链接：https://blog.youkuaiyun.com/qq_40072782/article/details/82533477

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用router-view实现路由内容，并详细讲解了通过router-link、this.$router.push和query/params参数传递的方法，以及它们的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

router-view 实现路由内容的地方，引入组件时写到需要引入的地方
需要注意的是，使用vue-router控制路由则必须router-view作为容器。

通过路由跳转的三种方式

1、router-link 【实现跳转最简单的方法】

<router-link to='需要跳转到的页面的路径>
浏览器在解析时，将它解析成一个类似于<a> 的标签。

2、this.$router.push
常用于路由传参，用法同第三种

区别：

query引入方式

params只能用name来引入路由
而query 要用path引入

query传递方式

类似于我们ajax中get传参，在浏览器地址栏中显示参数
params则类似于post，在浏览器地址栏中不显示参数

举例：

       this.$router.push({
          path: '/rental-list/transfer',
          query: {
            id: this.roleId,
            ids: this.checkList
          }

在跳转的页面，即路径为rental-list/transfer的页面接收参数

let id = this.$route.query.id  //接收id

3、this.$router.replace{path：‘/’ }类似，不再赘述