之前在原生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

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

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

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

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

个人微信公众号:

Logo

前往低代码交流专区

更多推荐