andriajah Sun Mar 2021 1 year ago

Tutorial Get Query Parameter di Vue Js menggunakan Vue Router


Halo vue devs dalam contoh singkat ini saya akan menunjukkan kepada Anda bagaimana Anda bisa mendapatkan parameter kueri dari url di Vue js. Untuk melakukan itu saya akan menggunakan vue-router. Jadi dalam contoh ini saya akan menggunakan vue-router untuk mengambil string kueri di vue js dari url.
 
Dalam vue js ini mendapatkan contoh parameter kueri dari url Anda dapat melihat untuk mendapatkan semua parameter dan Anda juga bisa mendapatkan satu nilai parameter bidang tertentu. mari kita lihat contoh di bawah ini:
 
Anda dapat mencoba menggunakan jenis url ini:
http://localhost:3000?site=codecheef.org&topic=vuejs
<!DOCTYPE html>
<html>
<head>
    <title>vuejs get query parameter example - medikre</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
</head>
<body>
  
<div id="app">
   
</div>
   
<script type="text/javascript">
   
  var router = new VueRouter({
    mode: 'history',
    routes: []
  });
  
  var myApp =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        parameters = this.$route.query
        console.log(parameters)
   
        site = this.$route.query.site
        console.log(site)
  
    },
  });
   
</script>
  
</body>
</html>
Semoga contoh ini membantu Anda mendapatkan parameter kueri di vue js.
vue js get parameter