关于vue的路由携带传参

路由传参分为 query传参跟 params 传参

一、query传参分编程式and声明式 ，参数会显示在地址栏：

        1.编程式

        使用this.$router.push()方法，可以配合name或者path实现传参

        例子：

      this.$router.push({

          name: "b",

          query: {

            name:"mingming",

            uuidL:'1',

          },

        });

页面地址显示效果：http://10.170.109.169:8080/b?name=mingming&uuidL=1

或者是：

      this.$router.push({

          path: "/b",

          query: {

            name:"mingming",

            uuidL:'1',

          },

        });

页面地址显示效果：http://10.170.109.169:8080/b?name=mingming&uuidL=1

2.声明式

      声明式就是使用router-link这个标签中的to属性实现路由跳转并带参，router-link

<router-link :to="{name:'a',query:{name:'mingming'}}">跳转</router-link>

页面地址显示效果：http://10.170.109.169:8080/a?name=mingming

二：params 传参也分编程式and声明式，传参分为明文（显示在地址栏）传参跟密文（不显示参数）传参两种 

1>params明文传参（显示在地址栏）

1.params明文传参（显示在地址栏）中  编程式配合name传参：

   路由表里面是动态路由：

 {

      name: 'b',

      path: '/b/:name&uuidL',

      component: () => import('@/view/B')

  },

页面跳转操作：

     this.$router.push({

          name: "b",

          params: {

            name:"mingming",

            uuidL:'1',

          },

        });

页面地址显示效果：http://10.170.109.169:8080/b/mingming&uuidL

2.params明文传参（显示在地址栏）中  编程式配合path传参：

   路由表里面是动态路由：

 {

      name: 'b',

      path: '/b/:name&uuidL',

      component: () => import('@/view/B')

  },

页面跳转操作：

   this.$router.push({

          path: `/b/name=${'mingming'}&uuidL=${'1'}`

        });

3.params明文传参（显示在地址栏）中  声明式配合name传参：

 路由表里面是动态路由：

 {

      name: 'b',

      path: '/b/:name&uuidL',

      component: () => import('@/view/B')

  },

 <router-link :to="{name:'b',params:{name:'mingming',uuidL:'1'}}">跳转</router-link>

页面地址显示效果：http://10.170.109.169:8080/b/mingming&uuidL

4.params明文传参（显示在地址栏）中  声明式配合path传参：

   路由表里面是动态路由：

 {

      name: 'b',

      path: '/b/:name&uuidL',

      component: () => import('@/view/B')

  },

声明式写法一：<router-link :to="{path:`/a/name=${'mingming'}uuidL=${'1'}`}">跳转</router-link>

页面实现效果：http://10.170.109.169:8080/a/name=mingminguuidL=1

声明式写法二：<router-link :to="`/a/name=${'mingming'}uuidL=${'1'}`">跳转</router-link>

页面显示效果：http://10.170.109.169:8080/a/name=mingminguuidL=1

2>params密文传参（不显示参数），只能配合name传参，不能配合path传参

1.params密文传参（不显示参数）编程式传参：

路由表显示：

  {

      name: 'b',

      path: '/b',

      component: () => import('@/view/B')

  },

页面操作：

 this.$router.push({

         name:"b",

         params:{name:"mingming",uuidL:'1'}

        });

页面地址显示效果：http://10.170.109.169:8080/b

2.params密文传参（不显示参数）声明式传参：

路由表显示：

  {

      name: 'b',

      path: '/b',

      component: () => import('@/view/B')

  },

页面操作：

<router-link :to="{name:'b',params:{name:'mingming',uuidL:'1'}}">跳转</router-link>

页面显示效果：http://10.170.109.169:8080/b