快捷導(dǎo)航

vue獲取url上參數(shù)的常見方法小結(jié)

更新時間：2025年11月06日 08:43:41 作者：悟能不能悟

這篇文章主要為大家詳細介紹了vue獲取url上參數(shù)的幾種常用方法,這些方法主要取決于你的使用場景,下面小編就和大家詳細介紹一下吧

1. 使用 Vue Router（推薦）

查詢參數(shù)（Query Parameters）

// 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);
  }
}

路由參數(shù)（Route Params）

// 路由配置
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);
  }
}

使用組合式 API（Vue 3）

<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>

2. 原生 JavaScript 方法

使用 URLSearchParams

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)
  }
}

傳統(tǒng) URL 解析

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')
  }
}

3. 監(jiān)聽參數(shù)變化

export default {
  watch: {
    '$route.query': {
      handler(newQuery) {
        // 查詢參數(shù)變化時執(zhí)行
        console.log('參數(shù)變化:', newQuery)
      },
      immediate: true // 立即執(zhí)行一次
    },
    
    '$route.params': {
      handler(newParams) {
        // 路由參數(shù)變化時執(zhí)行
        console.log('路由參數(shù)變化:', newParams)
      },
      immediate: true
    }
  }
}

4. 完整示例

<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' // 路由變化時重新獲取參數(shù)
  },
  methods: {
    getParams() {
      // 優(yōu)先使用路由參數(shù)，其次使用查詢參數(shù)
      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>