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>

我如何在我的用来处理路由器视图组件的CrimeView.vue中接受这些参数

这是我的route.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
        }

    },
   }

我如何在我的CrimeView.vue中的路由器视图中显示道具

Answer 1

我不确定100％是否对groupId的camelCasing感兴趣，所以我正在使用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
      }
    },

Answer 2

为了显示路线参数中的数据，您应该执行以下操作

elems = driver.find_elements_by_xpath("//a[@href]")
for elem in elems:
    print elem.get_attribute("data-style-name")

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

Answer 3

就我而言，这很完美，

尝试一下：

使用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>

如何在路由器视图中传递数据

3 个答案: