vue获取url上参数的常见方法小结

// URL: http://example.com/user?id=123&name=john

// 在组件中获取
export default {
  created() {
    const id = this.$route.query.id;     // "123"
    const name = this.$route.query.name; // "john"
    console.log(id, name);
  }
}

// 路由配置
const routes = [
  { path: '/user/:id', component: User }
]

// URL: http://example.com/user/123
export default {
  created() {
    const id = this.$route.params.id; // "123"
    console.log(id);
  }
}

<template>
  <div>用户ID: {{ userId }}</div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const userId = route.params.id || route.query.id
</script>

export default {
  methods: {
    getUrlParams() {
      const urlParams = new URLSearchParams(window.location.search)
      return {
        id: urlParams.get('id'),
        name: urlParams.get('name')
      }
    }
  },
  created() {
    const params = this.getUrlParams()
    console.log(params.id, params.name)
  }
}

export default {
  methods: {
    getQueryVariable(variable) {
      const query = window.location.search.substring(1)
      const vars = query.split('&')
      for (let i = 0; i < vars.length; i++) {
        const pair = vars[i].split('=')
        if (pair[0] === variable) {
          return decodeURIComponent(pair[1])
        }
      }
      return null
    }
  },
  created() {
    const id = this.getQueryVariable('id')
    const name = this.getQueryVariable('name')
  }
}

export default {
  watch: {
    '$route.query': {
      handler(newQuery) {
        // 查询参数变化时执行
        console.log('参数变化:', newQuery)
      },
      immediate: true // 立即执行一次
    },
    
    '$route.params': {
      handler(newParams) {
        // 路由参数变化时执行
        console.log('路由参数变化:', newParams)
      },
      immediate: true
    }
  }
}

<template>
  <div>
    <h2>用户信息</h2>
    <p>用户ID: {{ userId }}</p>
    <p>用户名: {{ userName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: null,
      userName: null
    }
  },
  created() {
    this.getParams()
  },
  watch: {
    '$route': 'getParams' // 路由变化时重新获取参数
  },
  methods: {
    getParams() {
      // 优先使用路由参数，其次使用查询参数
      this.userId = this.$route.params.id || this.$route.query.id
      this.userName = this.$route.query.name
      
      console.log('用户ID:', this.userId)
      console.log('用户名:', this.userName)
    }
  }
}
</script>