Как вы передаете данные в режиме роутера?

Question

Как, например,

 <router-link :to="{ name : 'criminalView', params : { criminalId : this.criminal.id , criminal : this.criminal } }" tag="a"    >
                        <img class="h-18 w-18 rounded-full mr-4 mt-2" src="{{ asset('assets/images/'.$criminal->photo) }}" id="criminalsPhoto"  alt="Criminals View" >
                    </router-link>

как я могу принять эти параметры в моем CriminalView.vue, который обрабатывает компонент вида маршрутизатора

Это мои маршруты.js

import VueRouter from 'vue-router';

import CriminalView from './components/CriminalView.vue';
import GroupView from './components/GroupView.vue';

let routes = [ 
{   
    path : '/criminal/:criminalId',
    name : 'criminalView',
    component : CriminalView,
props : { criminals } 
},
{   
    path : '/group/:groupId',
    name : 'groupView',
    component : GroupView,
},

]


export default new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});

как мне отобразить это в моем шаблоне, например, вот так

<section class="w-2/5 ml-2 font-basic" id="criminalProfile">
        <p class="font-basic tracking-normal text-2xl mb-4 mt-4 font-normal text-black mr-2">Criminal Profile of {{  this.criminal.full_name }}</p>
        <div class="bg-white px-8 py-8 pt-4">
            <div class="text-center">
                <div id="avatar" class="inline-block mb-6" >
                    <img :src="avatarPath"  class="h-50 w-50 rounded-full border-orange border-2">
                    <p class="font-bold mt-2 text-blue">$15,000</p>
                    <p class="mt-2 text-lg font-bold" >Notable Crimes:
                        <p class="mt-2 text-lg font-normal" >
                            <em class="font-bold roman">Offenses</em>Descr..
                        </p>
                    </p>
                    <div class="w-full flex justify-between">
                        <button class="w-full bg-green-theme p-3 text-white mt-4 ml-2 hover:bg-green-second" href="/criminal/" >View Full Profile</button>                  </div>
                </div>
            </div>
        </div>
    </section>

Это в моем теге скрипта ..

export default {

    props : ['criminals'],
    name: 'CriminalProfile',

data(){
        return {
            criminal : this.criminals,
            url : window.App.apiDomain
        }

    },
   }

Как я могу отобразить реквизиты вмой роутер, который есть в моем CriminalView.vue

Answer 1

Чтобы отобразить данные из параметров маршрута, вы должны сделать что-то вроде этого

// 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>

Здесь это ссылка маршрутизатора

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

Answer 2

В моем случае это отлично работает,

Попробуйте:

Используя this.$route.params.paramName, вы можете получить доступ к параметрам в компоненте просмотра маршрутизатора.

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

Answer 3

Я не уверен на 100% насчет camelCasing для groupId, поэтому я использую groupid.Попробуйте, и дайте нам знать о camelCase в комментариях.

    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
      }
    },