【发布时间】:2020-11-19 07:44:46
【问题描述】:
已编辑 -
最好重新开始。
我有一个 VUE js CLI 应用程序 - 它从 APP.vue 页面调用数据库,然后将数据分发到其他页面和导航栏 -
导航栏调用路由函数:
loadRouter(articles){
this.$router.push({name: 'Articles', params: {articles: articles}})
}
但是这现在导致了 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": []
}
]
【问题讨论】:
-
你试图通过路由传递一个数组,它需要一个原始值。您要么需要使用类似于 this 的 function mode,要么只传递一个 id 并在某处进行查找。
-
感谢您的回复 - 我已经更改了我的工作以通过发送一个原语,但它实际上效率不高 - 最初我发出了一个获取请求,它将所有数据加载到导航栏上 - 然后我想通过路由传递给组件,使用这种方法我正在发出多个获取请求.....这似乎不正确(但我很可能在这里错了) - 再次感谢您的帮助
-
嗨史蒂夫 - 谢谢你的建议 - 我已经按照这个并对代码进行了一些更改,但现在我收到错误 - 如果你可以重新访问它,我已经更新了这个问题太棒了,因为我真的迷路了,而且已经绕了一段时间了
-
我没有看到问题的更新
-
对不起,史蒂文 - 我刚刚添加了编辑 - 任何帮助都会很好,很抱歉长时间阅读.....问你可能有的任何问题 :)
标签: javascript vue.js vue-component vue-router