vue如何获取url 带的参数

要在Vue中获取URL带的参数，有以下几种常用方法：1、使用this.$route.query获取查询参数，2、使用this.$route.params获取动态路由参数，3、使用JavaScript原生方法window.location获取URL参数。下面将详细说明第一种方法。

1、 使用this.$route.query获取查询参数：Vue Router提供了一个便捷的方法来获取URL的查询参数（即?key=value形式的参数）。假设URL是http://example.com/?id=123&name=John，可以在Vue组件中通过this.$route.query来获取这些参数。

<template>

  <div>
    <p>ID: {{ id }}</p>
    <p>Name: {{ name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      name: ''
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
  }
}
</script>

一、使用`this.$route.query`获取查询参数

Vue Router提供了一个便捷的方法来获取URL的查询参数（即?key=value形式的参数）。假设URL是http://example.com/?id=123&name=John，可以在Vue组件中通过this.$route.query来获取这些参数。

步骤如下：

1. 在组件中使用this.$route.query获取查询参数。
2. 将获取到的参数赋值给组件的data属性。
3. 在模板中显示这些参数。

示例如下：

<template>

  <div>
    <p>ID: {{ id }}</p>
    <p>Name: {{ name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      name: ''
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
  }
}
</script>

这种方法十分简洁，适用于大多数需要获取查询参数的场景。

二、使用`this.$route.params`获取动态路由参数

动态路由参数是URL路径中的一部分，而不是查询参数。假设URL是http://example.com/user/123，可以在Vue组件中通过this.$route.params来获取这些参数。

步骤如下：

1. 在路由配置中定义动态路由参数。
2. 在组件中使用this.$route.params获取动态路由参数。
3. 将获取到的参数赋值给组件的data属性。
4. 在模板中显示这些参数。

示例如下：

// 在router.js中定义动态路由参数

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]
// 在User组件中获取动态路由参数
<template>
  <div>
    <p>User ID: {{ userId }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: ''
    }
  },
  created() {
    this.userId = this.$route.params.id;
  }
}
</script>

这种方法适用于需要在URL路径中包含参数的情况。

三、使用JavaScript原生方法`window.location`获取URL参数

除了Vue Router提供的方法，也可以使用JavaScript原生方法window.location来获取URL参数。这种方法不依赖Vue Router，适用于更加通用的场景。

步骤如下：

1. 使用window.location.search获取URL的查询字符串。
2. 使用URLSearchParams解析查询字符串。
3. 获取特定的参数值。

示例如下：

<template>

  <div>
    <p>ID: {{ id }}</p>
    <p>Name: {{ name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      name: ''
    }
  },
  created() {
    const params = new URLSearchParams(window.location.search);
    this.id = params.get('id');
    this.name = params.get('name');
  }
}
</script>

这种方法适用于不使用Vue Router的项目，或者需要兼容更复杂的URL解析情况。

四、比较与选择

选择合适的方法取决于项目的具体需求。如果项目已经使用了Vue Router，优先使用this.$route.query或this.$route.params。如果项目没有使用Vue Router，或者需要更通用的解决方案，可以考虑使用JavaScript原生方法。

总结

在Vue中获取URL带的参数有多种方法，每种方法都有其适用的场景和优缺点。1、使用this.$route.query获取查询参数，2、使用this.$route.params获取动态路由参数，3、使用JavaScript原生方法window.location获取URL参数。根据项目的具体需求选择合适的方法，可以提高开发效率和代码的可维护性。

建议开发者在实际项目中，尽量选择与项目技术栈匹配的方法。例如，已经使用了Vue Router的项目，优先使用this.$route.query和this.$route.params，这样可以充分利用Vue Router的特性和优势。而对于不使用Vue Router的项目，可以考虑使用JavaScript原生方法来获取URL参数，以保持代码的一致性和通用性。

相关问答FAQs：

1. 如何在Vue中获取URL中的参数？

在Vue中获取URL中的参数有多种方法。以下是其中几种常见的方法：

• 使用window.location.search：可以通过window.location.search获取到URL中的查询字符串部分，然后可以使用正则表达式或其他方法来解析参数。

// 获取URL中的查询字符串
const queryString = window.location.search;
// 解析查询字符串，获取参数
const urlParams = new URLSearchParams(queryString);
const paramValue = urlParams.get('paramName');

• 使用Vue Router的$route对象：如果你在Vue项目中使用了Vue Router，可以通过$route对象来获取URL中的参数。

// 在Vue组件中获取URL参数
export default {
  mounted() {
    // 获取参数
    const paramValue = this.$route.query.paramName;
  }
}

• 使用第三方库：除了上述方法，你还可以使用第三方库来处理URL参数。例如，qs库可以帮助你解析URL中的查询字符串。

import qs from 'qs';

// 获取URL中的查询字符串
const queryString = window.location.search;
// 解析查询字符串，获取参数
const params = qs.parse(queryString, { ignoreQueryPrefix: true });
const paramValue = params.paramName;

无论你选择哪种方法，都可以根据项目的需求来获取URL中的参数。

2. 如何在Vue中获取动态路由中的参数？

在Vue中，如果你使用了动态路由，可以通过$route.params来获取动态路由中的参数。以下是一个示例：

// 在Vue组件中获取动态路由参数
export default {
  mounted() {
    // 获取参数
    const paramValue = this.$route.params.paramName;
  }
}

在上述示例中，paramName是动态路由的参数名，你可以根据实际情况进行替换。

3. 如何在Vue中获取哈希路由（Hash Router）中的参数？

如果你在Vue项目中使用了哈希路由（Hash Router），可以通过$route.hash来获取哈希路由中的参数。以下是一个示例：

// 在Vue组件中获取哈希路由参数
export default {
  mounted() {
    // 获取参数
    const paramValue = this.$route.hash;
  }
}

在上述示例中，$route.hash返回的是哈希部分，你可以根据实际情况进行解析和处理。

无论你使用的是动态路由还是哈希路由，以上方法都可以帮助你在Vue中获取URL中的参数。根据实际需求选择适合你项目的方法即可。