Question

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

阅读此处的 official Vue documentation 和类似问题后，我了解 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
  }

Tag.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"/> 无济于事。该组件闪烁，好像它正在更新，但随后显示的内容与之前相同。

还有其他想法吗？

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

0 个答案: