[Vuejs]-How do you pass data in the router-view

I’m not 100% sure about camelCasing for groupId so I’m using groupid. Try it out, and let us know about camelCase in the comments.

    props: {
      //you could set the watch to this if you need.
      //groupid: {default: 1}
    },

    watch: {
       $route(to, from) {
        var groupid = (typeof to.params.groupid != 'undefined') ? to.params.groupid : 1;
//... do some stuff
      }
    },

In order to display data from the route params you should be doing something like this

// start route.js

export default new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  routes: [
    {
      path: 'my-route/:criminal',
      name: 'MyRoute',
      component: MyComponent
    }
  ]
})

// End route.js

<template>
  <section>
    <div>
      {{criminals}}
    </div>
  </section>
</template>

<script>
export default {
  name: 'CriminalProfile',
  data(){
    return {
      criminals: ''
    }
  },

  created(){
    this.criminals = this.$route.query.myparam
  }
}
</script>

Here it’s the router link

      <router-link :to="{ name: 'CriminalView', params: { criminalId: 123 }}">Criminal</router-link>

In my case this work perfectly,

Try this:

Using this.$route.params.paramName you can access params in router-view component.

<script>
export default{
    data() {
        criminal_id:'',
        criminal_data: ''
    },
    created() {
        this.criminal_id = this.$route.params.criminalId;
        this.criminal_data = this.$route.params.criminal;   
    }
}
</script>