Vue Router 路由跳转传参知识 总结

一、跳转方式

 

1、router-link 标签

　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：

     默认 to 不加：号

<router-link to="/order/check_order_list" replace></router-link>

    1.1 方法一 （ 按字符串路径）

           路径：http://localhost:8080/#/index/1

<router-link :to="'/index/'+id">

     router路由：

   { path: 'team/index/:id', name: 'index, component: teamIndex, },

            参数获得：this.$route.params.id（这个id给上图路由的配置有关）

    1.2 方法二 （ 按对象传）

      路径：http://localhost:8080/#/index?name=1

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

    跳转</router-link>(id是参数)

  参数使用：this.$route.query.id

   this.$route是一个数组，里面包含路由的所有信息

   注意：router-link中链接如果是‘/'开始就是从根路由开始，如果开始不带‘/'，则从当前路由开始。

 

2、router.push() 和 replace() 方法

　　同样的规则也适用于router.push(...)方法。

    1  params 传参

       注意：patams传参 ，路径不能使用path 只能使用name,不然获取不到传的数据

        传参：this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})

        取参：this.$route.params.paicheNo

    2 query传参

        传参：this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}})

          取参：this.$route.query.paicheNo

 

二、注意

 

1、关于带参数的路由总结如下：

无论是直接路由“path" 还是命名路由“name”，带查询参数query，地址栏会变成“/url?查询参数名：查询参数值“;

直接路由“path" 带路由参数params params 不生效;

命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;

 

2、设置路由map里的path值：

 带路由参数params时，路由map里的path应该写成:  path:'/apple/:color' ;

 带查询参数query时，路由map里的path应该写成: path:'/apple' ；

 

3、获取参数方法：

在组件中：  {{$route.params.color}}

在js里： this.$route.params.color