HDTuto.com

Vue Router Get Parameter from URL Example



I will explain step by step tutorial how to get query string value in vue js. you will learn vue js get query params example. if you want to see example of vue js get query string then you are a right place. you can understand a concept of vue router params props.

I will give you very simple example using vue router and we will getting all url query parameters in vue.js application.

In this example you can see to getting all params and also you can get single particular field parameter value. let's see bellow example:

You can try this type of url

http://localhost:8000?name=Hardik&email=hd@gmail.com

Example:

<!DOCTYPE html>

<html>

<head>

<title>Vue JS - Get Query Parameters Example - HDTuto.com</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)

name = this.$route.query.name

console.log(name)

},

});

</script>

</body>

</html>

I hope it can help you...




May 2, 2020 | Category : Vue.js



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.