开发之路十五——vue开发笔记

ps:好记性不如烂笔头，记录开发vue过程中的点滴

1、路由传参（3种方式）

• params传参（显示参数）
  需要路由配合，也就是在地址后面追加参数

//路由
{
  path: '/child/:id',
  component: Child
}
//跳转+传参
this.$router.push({
    path:'/child/${id}',
})
//获取参数
this.$route.params.id

• params传参（不显示参数）
  这种方式，会在刷新页面时参数丢失

//路由
{
  path: '/child',
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
        id:123
    }
})
//获取参数
this.$route.params.id

• query传参
  刷新不会丢失数据，方式类似于第二种方式

//路由
{
  path: '/child',
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    query:{
        id:123
    }
})
//获取参数
this.$route.query.id

2、利用微信api(weixin-jsapi)

• 使用时开发者工具会报错，只要扫码结果能够拿去到就行，手机预览时，会报错，是由于微信比较严格，需要在公众号内打开此h5才能正常使用，需要发版后测试此功能。如果报错scanQRCode:fail, the permission value is offline verifying，则按照下列方式，再重试。

 // 1.在开发者工具地址栏访问以下地址：
 https://www.weixinsxy.com/jssdk/
 // 2.查看权限是否开启成功，测试下看返回是否scanQRCode:ok，即成功
 // 3.然后再访问本地的开发地址进行测试

// 下载安装命令
npm install weixin-jsapi --save
// 在main.js中引入 weixin-jsapi
import wx from "weixin-jsapi"; 
// 在main.js中注册 weixin-jsapi
Vue.prototype.wx = wx

扫描样本编号