Vue.js查询参数

Question

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

__PRE__

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

Answer 1

根据route对象的文档,您可以访问$route组件中的对象,从而显示您需要的对象.在这种情况下

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

Answer 2

更详细的答案,以帮助VueJs的新手.

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

如果没有vue-route,请拆分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 4

试试这个代码

 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 5

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

this.$route.params.yourProperty

代替

this.$route.query.yourProperty

Answer 6

另一种方法(假设您正在使用vue-router)是将查询参数映射到路由器中的prop.然后,您可以像组件代码中的任何其他道具一样对待它.例如,添加此路线;

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

然后在您的组件中,您可以正常添加道具;

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

然后它将可用this.foo,你可以用它做任何你想做的事情(比如设置观察者等)

Answer 7

Vue 3 组合 API

（截至目前 2021，vue-router 4）

import {useRouter} 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 8

你可以使用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。这就是为什么我将vmto传递给next函数。这是访问 vue 实例的推荐方式。实际上它vm代表 vue 实例

Answer 9

如果您的网址如下所示：

somesite.com/something/123

其中 '123' 是一个名为 'id' 的参数（网址如 /something/:id），请尝试：

this.$route.params.id

Answer 10

如果您使用vue-routervue3 组合 api，这里是如何执行此操作

import { useRoute } from 'vue-router'

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