1.项目一(传递参数页面)
<template>
<q-page class="flex flex-center">
<vue-qrcode id="qrcode" :value="'oasis' + qrcodeValue.userId" scale="15"/> //生成的二维码
</q-page>
</template>
<script>
import VueQrcode from 'vue-qrcode'
export default {
name: 'PageIndex',
components: {
VueQrcode,
},
data() {
return {
qrcodeValue: {
userId: ''
},
}
},
created (){
this.getUser()
},
methods: {
getUser () {
this.$axios({
method: 'get',
url: 'http://localhost:8000/api/userinfo', //获取后台传过来的数据
headers: { 'Authorization': window.sessionStorage.getItem("token") },
data: []
})
.then(response => {
this.qrcodeValue = response.data.data
console.log(response.data.data)
this.qrcodeValue.userId = response.data.data.uid //使userId = 后台传过来的数据uid
console.log(response.data.data.uid)
})
.catch(function (error) {
console.log(error)
})
},
callback(){
var userId = id
location.href = `http://192.......:8086/#/` + id //`http://192.......:8086/#/是第二个项目打开页面的地址栏处的网址
}
//使用参数回调将id传递给第二个项目,此处是因为设备扫描二维码后虽然获得了id,但是不会立即跳转到下一个页面的,所以需要使用参数回调
}
}
</script>
2.项目二(接收参数页面)
- 1.在这个项目的routes.js处,将原本的path:'/'改为path: '/:id'
const routes = [
{
path: '/:id',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') }
]
}
]
export default routes
-
2.在接受页面里写上this.$route.params.id
created (){ this.getSak(this.$route.params.id) // 接收项目一传递过来的id } //使用created(),使他在加载时渲染页面