美文网首页
Vue-router tips

Vue-router tips

作者: BabyMT | 来源:发表于2020-01-06 11:35 被阅读0次

    1. $route和$router的区别

    在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数。
    在路由跳转的时候除了用router-link标签以外,也可以使用this.$router.push('')。
    当在控制台打出this的时候,发现$route和$router同时存在。

    $router

    router是VueRouter的实例,相当于一个全局路由对象,里面含有很多属性和子对象,如history,经常使用的$router.go方法就是返回上衣history。

    $route

    route相当于当前正在跳转的路由对象,可以获取当前router跳转对象里面的name、path、query、params等。
    一个是全局的,一个是当前的

    2.路由传参方式

    1.手写完整path
    this.$router.push({path:`/user/${userId}`})。
    

    这样传递参数的话,配置路由的时候需要在path上加参数path:user/:userId。
    这种接收参数的方式是this.$route.params.userId。

    2.用params传递
    router.push({name: 'user', params: {userId:123})
    
    3.用query传递
    router.push({path: 'register', query: {plan:'private})
    

    query传参是针对path的,params传参是针对name的,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

    相关文章

      网友评论

          本文标题:Vue-router tips

          本文链接:https://www.haomeiwen.com/subject/zdvhactx.html