初始路由器推送（VueJS）后，组件道具没有反应答案

【问题标题】：Component prop isn't reactive after initial router push (VueJS)初始路由器推送（VueJS）后，组件道具没有反应
【发布时间】：2020-05-06 13:11:24
【问题描述】：

我有一些视图/组件；主页、ScrapeResults 和搜索。为了帮助大家了解正在发生的事情，这里有一些与我的问题相关的 sn-ps 代码。

App.vue 的片段

<template>
    <v-app-bar>
        <Search @selected_card="scrape"/>
    </v-app-bar>

    <v-content>
        <v-container fluid style="width: 80%;">
            <router-view :card="card"></router-view> //card prop is in ScrapeResults.vue
        </v-container>
    </v-content>
</template>

<script>
    data() {
        return {
           card: {}
        }
    }
    methods: {
        scrape(card) { //card parameter value is from $emit event from Search
            if(this.$router.currentRoute.name != 'scrape-results') {
                this.$router.push({name: 'scrape-results', params: { card: card } });
            }
            else {
                this.card = card;
                console.log(this.card)
            }
        }
    }
</script>

Home.vue 的片段

<template>
    <div id="home">
        <h1>Home</h1>
        <Search id="search" @selected_card="scrape"/>
    </div>
</template>

<script>
    methods: {
        scrape(card) { //card parameter value is from $emit event from Search
            this.$router.push({ name: 'scrape-results', params: { card: card } });
        }
    }
</script>

ScrapeResults 的片段：

<template>
    <div id="home">
        <h1>Scrape Results</h1>
        <p> {{card.name}} - {{card.set_name}} </p>
        <v-img :src="card.img_url"></v-img>
    </div>
</template>

<script>
    ...... //irrelevant stuff
    props: {
        card: Object
    },
    watch: {
        card() {
            console.log(this.card)
        }
    }
</script>

应用内的路径：

/（首页）
/scrape-results (ScrapeResults)

因此，应用程序的工作方式是用户将搜索卡片（对象）并从呈现的列表中进行选择。一旦用户从呈现的列表中选择了一张卡片，用户就会被重定向到 Scrape Results 视图。从 Home.vue 完成时，所有这些都可以正常工作。

我的问题：如果用户从 Home.vue 访问 Scrape Results，并且仍在 Scrape Results 视图中，如果用户要通过安装在 App 中（在应用程序栏中）的 Search 组件搜索另一张卡片。 vue，那么 ScrapeResults.vue 中的卡片道具不会更新。奇怪的是，如果我通过在地址栏中输入 /scrape-results 手动导航到 Scrape Results，通过应用栏中的 Search 组件搜索卡片，然后卡片属性会更新。只有当我手动访问 /scrape-results 然后搜索卡片时，卡片属性才会更新。

我知道所有这些听起来都令人困惑，所以这是我录制的一个片段，它展示了我的问题所在。链接：https://www.youtube.com/watch?v=aO9qSTa9CCk&feature=youtu.be&hd=1

编辑：下面的路线定义

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import ScrapeResults from '@/views/ScrapeResults'

Vue.use(VueRouter);

const router =  new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/scrape-results',
            name: 'scrape-results',
            component: ScrapeResults,
            props: true
        }
    ]
});

export default router;

【问题讨论】：

显示路由定义
@Anatoly 路由定义是什么意思？
创建路由器并注册/scrape-results路径的代码
@Anatoly 哦，那个。很抱歉不理解。编辑帖子以显示路线定义。
为了让 'params' 在命名路由器中工作，你应该使用 props: true 注册一个类似 '/scrape-results/:card' 的路由

标签： javascript vue.js vue-router

【解决方案1】：

因此，我没有尝试将 prop 传递给 router-view 工作，而是最终将我 router.js 中的 ScrapeResults 路径更改为 /scrape-results/:card_set/:card_name;原来只是/scrape-results。然后我只是在 $router.push 中推送了额外的参数

this.$router.push({name: 'scrape-results', params: { card: card, card_set: card.set_name, card_name: card.name } });

【讨论】：