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

【问题标题】：How do you pass data in the router-view你如何在路由器视图中传递数据
【发布时间】：2023-03-09 20:56:01
【问题描述】：

例如

 <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 中接受那些处理路由器视图组件的参数

这是我的 routes.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 中的路由器视图中显示道具

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

我不能 100% 确定 groupId 的 camelCasing，所以我使用的是 groupid。试试看，让我们知道 cmets 中的 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
      }
    },

【讨论】：

【解决方案2】：

为了显示路由参数中的数据，您应该这样做

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

【讨论】：

在 routes.js 文件中怎么样？ ?
@TheBAST 我已经用 route.js 示例更新了答案以及如何在其上声明参数，让我知道。
包括路由器链接先生 :) 请
你去@TheBAST，让我知道
嘿伙计，我有两个参数 :)

【解决方案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>

【讨论】：