App.vue 742 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <div style="padding: 24px;">
  3. <h1>UTM Params Extractor Demo (Vue)</h1>
  4. <p>本页面演示如何在 Vue 项目中使用 <code>utm-params-extractor-test</code> 包。</p>
  5. <h2>获取到的参数:</h2>
  6. <pre style="background: #f6f8fa; padding: 16px; border-radius: 8px;">
  7. {{ utmJson }}
  8. </pre>
  9. </div>
  10. </template>
  11. <script>
  12. import UtmTracker from 'utm-params-extractor-test';
  13. export default {
  14. name: 'App',
  15. data() {
  16. return {
  17. utm: null
  18. };
  19. },
  20. computed: {
  21. utmJson() {
  22. return this.utm ? JSON.stringify(this.utm, null, 2) : '正在获取...';
  23. }
  24. },
  25. mounted() {
  26. this.utm = UtmTracker.get();
  27. }
  28. };
  29. </script>
  30. <style>
  31. body {
  32. font-family: Arial, sans-serif;
  33. }
  34. </style>