如何从 Vue.js 中的 URL 获取查询参数？

Question

如何在 Vue.js 中获取查询参数？

例如

http://somesite.com?test=yay

找不到获取方法，或者我需要使用纯 JS 或某些库吗？

Answer 1

根据 route object 的文档，您可以从组件访问

$route

对象，该对象公开您需要的内容。在这种情况下

// from your component
console.log(this.$route.query.test) // outputs 'yay'

Answer 2

没有vue-router，分割URL

var vm = new Vue({
  ....
  created() {
    let uri = window.location.href.split('?');
    if(uri.length == 2) {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v) {
        tmp = v.split('=');
        if(tmp.length == 2)
          getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated() {
  },
....

另一个解决方案https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search：

var vm = new Vue({
  ....
  created() {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated() {
  },
....

Answer 3

试试这个代码

var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

Answer 4

更详细的答案来帮助VueJS新手：

• 首先定义您的路由器对象，选择您认为合适的模式。 您可以在路线列表中声明您的路线。
• 接下来，您希望主应用程序知道路由器存在，因此请在主应用程序声明中声明它。
• 最后，

  $route

  实例保存了当前路线的所有信息。该代码将控制台仅记录 url 中传递的参数。 （*Mounted 类似于

  document.ready

  ，即应用程序准备好后立即调用）

代码本身：

<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

Answer 5

另一种方法（假设您正在使用

vue-router

），是将查询参数映射到路由器中的道具。然后您可以像组件代码中的任何其他 prop 一样对待它。例如添加这条路由；

{ 
  path: '/mypage', 
  name: 'mypage', 
  component: MyPage, 
  props: (route) => ({ foo: route.query.foo }),  
}

然后在你的组件中你可以像平常一样添加道具；

props: {
  foo: {
    type: String,
    default: null,
  }
},

然后它将作为

this.foo

可用，您可以用它做任何您想做的事情（例如设置观察者等）

Answer 6

Vue 3 组合 API

（截至2021年，vue-router 4）

import {useRoute} from "vue-router";

//can use only in setup()
useRoute().query.test

或

//somewhere in your src files
import router from "~/router";

//can use everywhere 
router.currentRoute.value.query.test  

或

import {useRouter} from "vue-router";

//can use only in setup()
useRouter().currentRoute.value.query.test

Answer 7

截至目前，正确的方法根据动态路由文档是：

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty

Answer 8

如果您的网址如下所示：

somesite.com/something/123

其中“123”是名为“id”的参数（类似于 /something/:id 的 URL），请尝试使用：

this.$route.params.id

Answer 9

如果您将

vue-router

与 vue3 组合 api 一起使用，请按照以下步骤操作

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.query)
  }
}

Answer 10

你可以使用vue-router。我有一个例子如下：

网址：

www.example.com?name=john&lastName=doe

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: '',
  },
  beforeRouteEnter(to, from, next) {
    if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
      next(vm => {
        vm.name = to.query.name;
        vm.lastName = to.query.lastName;
      });
    }
    next();
  }
})

注意： 在

beforeRouteEnter

函数中，我们无法访问组件的属性，例如：

this.propertyName

。这就是为什么我将

vm

传递给

next

函数。这是访问 vue 实例的推荐方式。实际上

vm

它代表vue实例

Answer 11

示例网址：http://localhost:9528/#/course/outline/1439990638887137282

以下代码输出：

1439990638887137282

this.courseId = this.$route.params.id
console.log('courseId', this.courseId)

Answer 12

除了这里的答案之外，我建议您使用 Vue 开发工具进行进一步调试。

给出这段代码

<template>
  <div>
    {{ showOrNotTheMessage }}
  </div>
</template>

<script>
export default {
  computed: {
    showOrNotTheMessage() {
      return this.$route.query?.lookingforthis
        ? 'Show this message'
        : 'Dont show this message'
    },
  },
}
</script>

这个主要以显示条件字符串为例。

---

如果您想进一步调试您正在做的事情（使用选项或组合 API），您可以在 Vue 开发工具中选择

root

组件，然后使用

访问控制台中的整个 Vue 实例

$vm0.$route.query

PS：在Vue3中，您需要使用以下命令通过Devtools访问Vue实例。

$vm0.proxy.$route.params.query

这可以帮助您更快地调试代码，并有可能找到很酷的东西来玩。

Answer 13

如果您使用哈希模式，请记住一件事，然后不要使用 this。$route.params.name 仅使用 url 搜索参数

Answer 14

---

Vue 3 组成：

---

首先包括你的路由器

import router from '../../router'

然后访问例如 id；使用

 router.currentRoute.value.params.id