【问题标题】:updating components when new params are passed to them (VUE JS)将新参数传递给组件时更新组件(VUE JS)
【发布时间】:2020-11-19 07:44:46
【问题描述】:

已编辑 -

最好重新开始。

我有一个 VUE js CLI 应用程序 - 它从 APP.vue 页面调用数据库,然后将数据分发到其他页面和导航栏 -

导航栏调用路由函数:

loadRouter(articles){
          this.$router.push({name: 'Articles', params: {articles: articles}})
      }

但是这现在导致了 2 个问题:

  1. 单击新导航时组件不会重新加载新数据

  2. 我收到一个错误:

    错误:避免重复导航到当前位置:“/articles”。

代码:

app.vue <Navbar :articleData="articleData"/>)

<template>
  <div id="app">
    <div class="topElements">
      <Navbar :articleData="articleData"/>
      
      <router-view/>
    </div>
      <Footer />
  </div>
</template>

<script>
import Navbar from '@/components/Nav.vue'

import Footer from '@/components/Footer.vue'
export default {
  components: {
    Navbar,
    Footer
  },
  data(){
    return {
      articleData: null,


      //   set up a variable for the local host as this will change later when the enviroment moves online
      enviroment: 'http://localhost:1337/',
    }
  },
  created(){
    fetch(`${this.enviroment}languages`)
    .then(responce => responce.json())
    .then(data => {this.articleData = data})
  }
}
</script>

Navbar.vue $route.push文章组件和道具的回调

template>
  <div class="navigationContainer">
      <div class="languageContainer" v-for="item in articleData" :key="item.id">
          <h2 @click="loadRouter(item.articles)">{{ item.title }}</h2>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props: ['articleData'],
  data(){
      return{

      }
  },
  methods: {
      loadRouter(articles){
          this.$router.push({name: 'Articles', params: {articles: articles}})
      }
  } 
}
</script>

Articles.vue

Articles.vue

<template>
  <div class="articleContainer">
     <p>{{ articles }}</p>  <<< just to display if the props has come through correctly - will be changed later
  </div>
</template>

<script>
export default {
    name: 'Articles',
    props: ['articles'],
    data(){
      return{
        articleData: null,
      }
    },
    watch: {
      articles(){
        this.articleData = this.articles; <<<< trying to update the component when A new $route is detected - I also tried this with $route
        console.log(articleData) <<< checking if it worked.... 
      }
    }
}
</script>

这就是要阅读的内容,所以我只想对您在这里提供的任何帮助表示感谢。

热烈的问候, 沃利

附言

问你可能有的任何问题

已编辑:

文章数据来自:http://localhost:1337/languages

它是从 STRAPI API 中提取的 OBJS 数组(我已将其公开)

[
{
"id": 1,
"title": "JS",
"created_at": "2020-07-10T08:30:33.156Z",
"updated_at": "2020-07-10T08:30:33.156Z",
"articles": [
{
"id": 4,
"title": "hamburger menu",
"description": "This is where I would explain how to make a front end hamburger menu style for the navigation of a web page",
"created_at": "2020-07-10T08:32:11.474Z",
"updated_at": "2020-07-10T08:32:11.474Z"
}
]
},
{
"id": 2,
"title": "HTML",
"created_at": "2020-07-10T08:30:38.437Z",
"updated_at": "2020-07-10T08:30:38.437Z",
"articles": [
{
"id": 4,
"title": "hamburger menu",
"description": "This is where I would explain how to make a front end hamburger menu style for the navigation of a web page",
"created_at": "2020-07-10T08:32:11.474Z",
"updated_at": "2020-07-10T08:32:11.474Z"
},
{
"id": 5,
"title": "WEB STRUCTURE",
"description": null,
"created_at": "2020-07-10T10:08:44.221Z",
"updated_at": "2020-07-10T10:08:44.221Z"
}
]
},
{
"id": 3,
"title": "CSS",
"created_at": "2020-07-10T08:30:43.107Z",
"updated_at": "2020-07-10T08:30:43.107Z",
"articles": [
{
"id": 4,
"title": "hamburger menu",
"description": "This is where I would explain how to make a front end hamburger menu style for the navigation of a web page",
"created_at": "2020-07-10T08:32:11.474Z",
"updated_at": "2020-07-10T08:32:11.474Z"
}
]
},
{
"id": 4,
"title": "VUE",
"created_at": "2020-07-10T10:52:11.390Z",
"updated_at": "2020-07-10T10:52:11.390Z",
"articles": []
},
{
"id": 5,
"title": "NODE JS",
"created_at": "2020-07-10T10:52:23.351Z",
"updated_at": "2020-07-10T10:52:23.351Z",
"articles": []
},
{
"id": 6,
"title": "SASS",
"created_at": "2020-07-10T10:52:31.450Z",
"updated_at": "2020-07-10T10:52:31.450Z",
"articles": []
},
{
"id": 7,
"title": "PHP",
"created_at": "2020-07-12T19:21:48.620Z",
"updated_at": "2020-07-12T19:21:48.620Z",
"articles": []
},
{
"id": 8,
"title": "GIT",
"created_at": "2020-07-12T19:22:02.208Z",
"updated_at": "2020-07-12T19:22:02.208Z",
"articles": []
}
]

【问题讨论】:

  • 你试图通过路由传递一个数组,它需要一个原始值。您要么需要使用类似于 thisfunction mode,要么只传递一个 id 并在某处进行查找。
  • 感谢您的回复 - 我已经更改了我的工作以通过发送一个原语,但它实际上效率不高 - 最初我发出了一个获取请求,它将所有数据加载到导航栏上 - 然后我想通过路由传递给组件,使用这种方法我正在发出多个获取请求.....这似乎不正确(但我很可能在这里错了) - 再次感谢您的帮助
  • 嗨史蒂夫 - 谢谢你的建议 - 我已经按照这个并对代码进行了一些更改,但现在我收到错误 - 如果你可以重新访问它,我已经更新了这个问题太棒了,因为我真的迷路了,而且已经绕了一段时间了
  • 我没有看到问题的更新
  • 对不起,史蒂文 - 我刚刚添加了编辑 - 任何帮助都会很好,很抱歉长时间阅读.....问你可能有的任何问题 :)

标签: javascript vue.js vue-component vue-router


【解决方案1】:

您的导航栏可以只使用普通的router-link 并将文章绑定到路由的参数。

Navbar.vue

<template>
  <div class="navigationContainer">
      <div class="languageContainer" v-for="article in articleData" :key="item.id">
          <router-link :to="{name: 'Articles', params: { id: article.id, article: article }}">
            {{ article.title }}
          </router-link>
      </div>
  </div>
</template>
....

您需要更新您的路线以使用function mode 并从route.params 解析出文章以作为道具馈送到您的组件中。

路线

{
    name: 'Articles',
    path: '/articles/:id', 
    props: (route) => ({
        id: route.params.id,
        article: route.params.article,
    })
}

最后,您的文章组件将收到 idarticle 作为道具。

Articles.vue

<template>
  <div class="articleContainer">
     <p>{{ id }}</p>
     <p>{{ article.title }}</p>
     <p>{{ article.description }}</p>
  </div>
</template>

<script>
export default {
    name: 'Articles',
    props: ['id', 'article'],
    created() {
        if (!this.article) {
            // direct url navigation: you need to fetch the article using `this.id`
        }
    }
}
</script>

Simplified Demo

您需要考虑的一件事。如果用户直接通过 url 导航到路由,article 属性将为空。因此,您需要在组件的 created 挂钩或路由器导航保护中获取文章。

【讨论】:

  • 非常感谢您的反馈!我会尽快实现它,看看它是否成功:) 感谢您在这个问题上所做的所有努力,非常感谢
  • 嗨史蒂文 - 刚刚实现了这个(不得不从屏幕上休息一会儿) - 一切都像我最初希望的那样工作 - 再次感谢你在这个问题上的帮助,它似乎我对 Vue.js 以及如何处理路由还有更多的学习。我最初使用 router-links 而不是 $route.push 但不知道 params 函数(或如何处理它) - 这对我来说是一个很好的学习!再次感谢您的所有帮助,让我免于白发:P
【解决方案2】:

我可能会做一些不同的事情,如下所示:

  1. 在 App.vue 中,不要获取整组 articleData。相反,只需检索导航栏需要的项目标题和项目 ID。

  2. 然后,在 Navbar 中,只需使用 router-link 来传递 item.id:

          <router-link :to="{name: 'Articles', params: { itemid: item.id}}">
            {{ article.title }}
          </router-link>```
  1. 然后,在您的文章组件中,在 mounted() 生命周期方法中获取文章详细信息,关闭 itemid

  2. 最后一步解决了帖子的标题,这对于确保即使 $route 看似未更改也能触发 Articles 挂载的生命周期方法是必要的。为此,您可以在 App.vue 文件中将 &lt;router-view&gt; 更改为 &lt;router-view :key="$route.fullPath"&gt;

<template>
  <div id="app">
    <div class="topElements">
      <Navbar :articleData="articleData"/>
      
      <router-view :key="$route.fullPath" />
    </div>
      <Footer />
  </div>
</template>

虽然这种方法需要两次提取而不是一次提取,但您只会提取用户特定路径所需的数据。

【讨论】:

  • 这实际上也是我可能会这样做的方式,但我只会使用 beforeRouteUpdate 组件内保护来获取新数据,而不是在 router-view 上放置一个键并导致完整重新渲染。
猜你喜欢
  • 2016-09-24
  • 2018-11-23
  • 2018-08-03
  • 2021-04-03
  • 1970-01-01
  • 2020-11-28
  • 2018-03-06
  • 2017-12-02
  • 1970-01-01
相关资源
最近更新 更多