当前位置: 首页>前端>正文

vue-quasar 两个项目之间传递所需参数

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(),使他在加载时渲染页面
    

https://www.xamrdz.com/web/2x61994556.html

相关文章: