Vuejs Router pass url parameters Synchronize

Today, We want to share with you Vuejs Router pass url parameters Synchronize.
In this post we will show you Vuejs pass url parameters with router Example, hear for Pass Data Between Routes In A Vue.js Web Application we will give you demo and example for implement.
In this post, we will learn about Passing Props to Route Components with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.In my lovely post example for Vuejs pass url parameters with router Example

READ :  AngularJS Datetime format filter in controller

How to pass url parameters to Vuejs with querystring Example

router.map({
    '/user/:id': {
        component: product,
        name: 'product'
    },
})

//this.$route.params.id

Vuejs get url param Example

module.exports = {
    template: require('./display.html'),

    ready: function() {
        this.ferchproduct();
    },

    methods: {
        ferchproduct: function(params) {
            this.$http.get('https://infinityknow.com/api/library/' + params.productid , function(response) {
                this.$set('response', response);
                console.log(params);
            });
        }
    }

};

vuejs router params and pass to

index.html

<div id="vueappdemo">
  <div class="container">
    
    <div class="row">
      <div class="col-sm-12">
        <a href="#" class="btn btn-success">Simple Load Products</a>
      </div>
    </div> 
    
    <div class="row">
      <div class="col-sm-12">
        
        <h3>
          Products List
        </h3>
        <ul>
          <li>
            {{ prod.name }} - {{ prod.email }}
          </li>
        </ul>  
        
      </div>
    </div> <!-- row -->
    
    <div class="row">
      <div class="col-sm-12">
        <h3>
          Vuejs Simple Debug Data
        </h3>
        <pre>{{ $data | json }}</pre>
      </div>
    </div> 
  </div>
</div>

script.js

new Vue({
  el: '#vueappdemo',
  data: {
    debug: true,
    Products: []
  },
  methods: {
    loadproducts: function() {
      this.$http.get('https://infinityknow.com/product', function(data, status, request){
        if(status == 200)
        {
          this.Products = data;
        }
      });
    }
  }
});

Demo Example

READ :  Vue js Add active class to current Navigation Menu