Làm cách nào tôi có thể nhận được các tham số truy vấn từ một URL trong Vue.js?

Làm cách nào tôi có thể tìm nạp các tham số truy vấn trong Vue.js?

Ví dụ http://somesite.com?test=yay.

Không thể tìm cách tìm nạp hoặc tôi cần sử dụng JS thuần túy hoặc một số thư viện cho việc này?

Theo các tài liệu của đối tượng tuyến đường , bạn có quyền truy cập vào một $routeđối tượng từ các thành phần của mình, điều này phơi bày những gì bạn cần. Trong trường hợp này

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

Nếu không có vue-route, hãy tách 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(){
  },

Một giải pháp khác https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkEuityUtils/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(){
  },

Câu trả lời chi tiết hơn để giúp những người mới của VueJS:

• Đầu tiên xác định đối tượng bộ định tuyến của bạn, chọn chế độ bạn có vẻ phù hợp. Bạn có thể khai báo các tuyến đường của bạn trong danh sách các tuyến đường.
• Tiếp theo, bạn sẽ muốn ứng dụng chính của mình biết bộ định tuyến tồn tại, vì vậy hãy khai báo nó bên trong khai báo ứng dụng chính.
• Cuối cùng, ví dụ $ route chứa tất cả thông tin về tuyến đường hiện tại. Mã sẽ điều khiển đăng nhập chỉ tham số được truyền trong url. (* Được gắn kết tương tự như document. Yet, .ie được gọi ngay khi ứng dụng sẵn sàng)

Và bản thân mã:

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

Một cách khác (giả sử bạn đang sử dụng vue-router), là ánh xạ thông số truy vấn tới chỗ dựa trong bộ định tuyến của bạn. Sau đó, bạn có thể coi nó như bất kỳ chỗ dựa nào khác trong mã thành phần của bạn. Ví dụ: thêm tuyến đường này;

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

Sau đó, trong thành phần của bạn, bạn có thể thêm prop như bình thường;

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

Sau đó, nó sẽ có sẵn this.foovà bạn có thể làm bất cứ điều gì bạn muốn với nó (như đặt một người theo dõi, v.v.)

Kể từ ngày này, cách chính xác theo các tài liệu định tuyến động là:

this.$route.params.yourProperty

thay vì

this.$route.query.yourProperty

Bạn có thể sử dụng vue-router. Tôi có một ví dụ dưới đây:

url: 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()
  }
})

Lưu ý: Trong beforeRouteEnterchức năng, chúng tôi không thể truy cập thuộc tính của thành phần như: this.propertyNameVững lý do tại sao tôi có vượt qua vmđể nextfunction.It là cách recommented để truy cập các vue instance.Actually sự vmnó là viết tắt ví dụ vue

Bạn có thể nhận được bằng cách sử dụng chức năng này.

console.log(this.$route.query.test)

Nếu url của bạn trông giống như thế này:

somesite.com/something/123

Trong đó '123' là một tham số có tên 'id' (url like / Something /: id), hãy thử với:

this.$route.params.id

Nếu máy chủ của bạn sử dụng php, bạn có thể làm điều này:

const from = '<?php echo $_GET["from"];?>';

Chỉ cần làm việc.