javascript - Vue路由器更改URL，但不是更新参数的页面内容

Question

我有一个包含文章列表的新闻页面（来自 Firebase）。每篇文章旁边都有一个主题标签列表。当用户点击一个标签时，他们会被带到一个Tag.vue页面，该页面仅列出与该标签相关的文章，使用一个ArticlesList组件。这部分是成功的，但是，当在 on 时单击另一个标签时Tag.vue，路由器会正确更改 URL，但内容仍然是静态的。

在阅读了官方的 Vue 文档和类似的问题后，我明白watch或者beforeRouteUpdate可以用来重新加载内容，但我不确定在其中一个里面放什么来实现这一点。我尝试了 的变体this.$router.push，但没有导致任何重定向或无限重定向。

我的代码如下，注释之间的相关部分。

指向标签页面的路由器链接

<router-link :to="{ name: 'Tag', params: { tagURL: tag } }">{{tag}}</router-link>

index.js

  {
    path: '/news/tag/:tagURL',
    name: 'Tag',
    component: Tag,
    props: true
  }

标签.vue

<template>
    <ArticlesList :dbQuery="dbQuery" :dbLimit="dbLimit"/>
</template>

<script>
    import ArticlesList from '@/components/ArticlesList'
    import { useRouter } from 'vue-router'

    export default {
        props: {
            tagURL: {
                type: String,
                required: true
            }
        },
        components: { ArticlesList },
        setup(props) {
            const router = useRouter()

            const dbQuery = ['tags', 'array-contains', props.tagURL]
            const dbLimit = 10

            return { dbLimit, dbQuery, router }
        },

        //**************************************************
        // use watch? $route or "$route.params"?
        watch: {

            $route(to, from) {
                 // what goes in here to reload the content?
            }

            "$route.params": function(params) {
                 // what goes in here to reload the content?
             }
         },

        // or is beforeRouteUpdate better?
        beforeRouteUpdate(to, from, next) {
            // what goes in here to reload the content?
        },
        //**************************************************

    name: 'Tag'
    }
</script>

编辑（5/17/21）：尝试<ArticlesView :articleQuery="articleQuery" :articleLimit="articleLimit" :key="$route.fullPath"/>无济于事。组件闪烁，好像它正在更新，但随后显示与以前相同的内容。

还有其他想法吗？

标签： javascriptfirebasevue.jsvue-router