|
@@ -1,17 +1,24 @@
|
|
|
<script setup>
|
|
|
-import HelloWorld from './components/HelloWorld.vue'
|
|
|
+import { ref, computed, onMounted } from 'vue'
|
|
|
+import UtmTracker from 'utm-params-extractor-test'
|
|
|
+
|
|
|
+const utm = ref(null)
|
|
|
+const utmJson = computed(() => utm.value ? JSON.stringify(utm.value, null, 2) : '正在获取...')
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ utm.value = UtmTracker.get()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <a href="https://vite.dev" target="_blank">
|
|
|
- <img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
|
- </a>
|
|
|
- <a href="https://vuejs.org/" target="_blank">
|
|
|
- <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
|
|
- </a>
|
|
|
+ <div style="padding: 24px;">
|
|
|
+ <h1>UTM Params Extractor Demo (Vue3)</h1>
|
|
|
+ <p>本页面演示如何在 Vue3 项目中使用 <code>utm-params-extractor-test</code> 包。</p>
|
|
|
+ <h2>获取到的参数:</h2>
|
|
|
+ <pre style="background: #f6f8fa; padding: 16px; border-radius: 8px;">
|
|
|
+ {{ utmJson }}
|
|
|
+ </pre>
|
|
|
</div>
|
|
|
- <HelloWorld msg="Vite + Vue" />
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|