Vuejs router.params undefined

Question

I am just trying a basic functionality with router params and I am getting undefined for router.params

my template

 <div id="app><template id="image-capture">
          <div class="row" >
               <router-link :to="{ path: 'vc/'+item.id}" class="btn btn-primary"> ACCEPT</router-link>
    </div>
      </template></div>

now my url looks like this http://localhost/cams-web/#/vc/3

const ic = {
  template: '#image-capture' ,
}

const vc = {
  template: '#video-capture' ,

  mounted () {
    this.init()
  },

  methods: {
    init () {
    console.log(router);  //returns object
 console.log(router.params); //undefined.. 
   },
    }
}


const routes = [
  { path: '/ic', component:   ic},
  { path: '/vc/:id', component:  vc}
]

const router = new VueRouter({
  routes 
})

 new Vue({
  router,
   }).$mount('#app')

Answer 1

To access the router params, you need to use this.$route.params in your code. Your code should be something like following:

const vc = {
  template: '#video-capture' ,

  mounted () {
    this.init()
  },

  methods: {
    init () {
      console.log(this.$route);  //should return object
      console.log(this.$route.params); //should return object 
      console.log(this.$route.params.id); //should return id of URL param 
    },
  }
}

Here is working fiddle.