Vue路由跳转+路由传参

骑猪看日落 2021-09-18 19:10 678阅读 0赞

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。

比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。

而常见的写法就是：

location.href("index.html")

那么vue是基于路由的，那么怎么进行页面的跳转？

**路由。**

大家都知道vue的每个页面级组件需要配置路由才可以使用，那么跳转页面也就是控制路由的切换。

例如：点击登录按钮，跳转到登录页面

this.$router.push({
        "path":"/Login"
    })

\* ：注意this指向

这里通过路由router的push方法，用来切换当前路由，path指向要跳转的页面路径。

但是往往我们不只是需要切换页面，还需要附加一些状态、参数等供下一个页面使用。

比如：登录后我需要把用户名传到要跳转的首页，以显示出来

比如：点击商品列表的某个商品我需要把当前点击的是哪件商品（下标/id...）传到商品详情页面，然后显示对应商品的商品详情。

案例测试：点击登录，跳转到首页，并把用户名传到首页

**路由传参方式一 ：**

this.$router.push({
        "path":"/index"，
        "query":{
            "username":this.username
        }
    })

通过path指向要跳转的页面，query是要传递的参数（path是配置路由时写的路径）

this.$route.query.username;

首页接收传递过来的用户名。

注：跳转传参的一方是 router ，接收参数的一方是 route ，不要写错了

**路由传参方式二 ：**

this.$router.push({
        "name":"index"，
        "params":{
            "username":this.username
        }
    })

通过name指向要跳转的页面，params是要传递的参数（name是配置路由时写的名字）

this.$route.params.username

首页接收传递过来的用户名。

**路由传参方式三：**

<router-link :to="{path:'/index',query:{username:username}}"></router-link>

获取：

this.$route.query.username

好了，以上就是一些常见的路由传参的方式。

当然，方法还有很多，这里就不一一赘述了。

欢迎大家在评论区提出，共同学习。

如有问题，请指出，接受批评。

个人微信公众号：

![2020082411564191.png][]

[2020082411564191.png]: /images/20210812/98627b58f2ac41848ff55001ca7ec8cb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，678人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-router路由跳转&路由传参

对于大多数单页面应用，都推荐使用官方支持的 [vue-router 库][vue-router]。更多细节可以移步 [vue-router文档][vue-router 1] 。

淡淡的烟草味﹌/ 2023年10月06日 17:18/ 0 赞/ 17 阅读

相关 Vue Router 路由跳转传参实践

Vue Router 路由跳转传参实践文章目录 Vue Router 路由跳转传参实践一、动态路由匹配 1、路由配置 2、

╰+哭是因爲堅強的太久メ/ 2023年09月26日 20:27/ 0 赞/ 150 阅读

相关 vue-03-路由-路由传参

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

男娘i/ 2023年07月20日 13:40/ 0 赞/ 40 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 294 阅读

相关 vue路由传值与路由跳转

一、用name传递参数两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性。

迷南。/ 2022年05月28日 12:57/ 0 赞/ 324 阅读

相关 vue路由跳转带参

当前页面写法： ![20181116175914968.png][] 目标页面接收参数的写法 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

超、凢脫俗/ 2022年04月16日 04:22/ 0 赞/ 467 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 679 阅读

相关 vue路由传值与路由跳转

一、用name传递参数两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性。

忘是亡心i/ 2021年09月16日 13:04/ 0 赞/ 602 阅读

相关 Vue - 详解路由跳转及路由传参问题

在Vue中路由跳转有四种方式一. 路由跳转有四种方式二. 不带参路由跳转 1. router-link 2. this.$rou

青旅半醒/ 2021年07月25日 13:30/ 0 赞/ 925 阅读

相关 vue 命名路由跳转、传参

命名路由 (1)通过路由设置的name来导航 (2)编程式导航中,也可以使用命名路由的方式如:this.$router.pu

今天药忘吃喽~/ 2021年07月24日 17:59/ 0 赞/ 645 阅读