6.Vue-路由传参的方式

点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

     <div class="examine" @click="insurance(2)">查看详情</div>

特别注意哦，组件中获取参数的时候是route.params 而不是router
router 这很重要~~~

第一种方法页面刷新数据不会丢失传递的参数会显示在url后面?id=？

methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })
}

需要对应路由配置如下：可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。

   {
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }

在子组件中可以使用来获取传递的参数值

   this.$route.params.id

第二种方法页面刷新数据会丢失通过路由属性中的name来确定匹配的路由，通过params来传递参数。

   methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

    {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

子组件中: 这样来获取参数

   this.$route.params.id

第三种方法页面刷新数据不会丢失
使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

对应路由配置：

   {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

子组件中: 这样来获取参数

   this.$route.query.id

加密参数

在vue项目里，怕刷新页面丢失参数常用query代替params,但是会导致传递的参数会显示在url后面类似?id=？为了保证敏感数据不会泄露，使用加密参数来解决这个问题，使用加密方式是Base64
第一种npm 安装

npm install --save js-base64

在项目文件(play.vue)中引入

let Base64 = require('js-base64').Base64
<script>
    export default {
        name: "play",
    }
</script>

当前项目文件(play.vue)中使用加密

Base64.encode('4')  // 返回值是"NA==",此时已经将4转换成了"NA=="

在其他项目文件(playNext.vue)中引入

let Base64 = require('js-base64').Base64
<script>
    export default {
        name: "playNext",
    }
</script>

在其他项目文件(playNext.vue)中使用，进行解密

Base64.decode('NA==')  // 返回值的4，将加密后的字符串解密成原来的

第二种直接引入的方式：首先创建一个base64.js,

const Base64 = {
   //加密
    encode(str) {
        return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
            function toSolidBytes(match, p1) {
                return String.fromCharCode('0x' + p1);
            }));
    },
  //解密
    decode(str) {
        // Going backwards: from bytestream, to percent-encoding, to original string.
        return decodeURIComponent(atob(str).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }
}
export default Base64

在main.js中全局引入，方便调用

import Base64 from './utils/base64.js' 
Vue.prototype.$Base64 = Base64;

当前项目文件(play.vue)中使用加密

 this.$Base64.encode('4')  // 返回值是"NA==",此时已经将4转换成了"NA=="

在其他项目文件(playNext.vue)中使用，进行解密

 this.$Base64.decode('NA==')  // 返回值的4，将加密后的字符串解密成原来的

最后编辑于：2020.07.02 16:23:53