VueJS替换组件//相同路由问题的数据

Question

我有一个'/posts'路由。这个"posts"路由有一个created((函数，它通过GET从API获取数据并将数据输出到页面。

现在我有一个导航栏，它包含在每个页面上。这个导航栏现在有一个输入字段，我可以在这里通过标签搜索某些帖子。这个基于标签的搜索功能已经在工作，并通过POST运行到api。

现在的问题是：

我在导航的输入字段中写了一些标签并进行搜索。如果我目前不在帖子路线上，搜索会很好，我会被引导到帖子路线，并查看与标签相关的帖子。

如果我在导航栏输入字段中写一些标签，然后按下搜索按钮，当我已经在posts路线上时，什么都不会发生。

因此，如果我在其他路线上，那么"/posts"，基于标签的搜索效果很好。

这就是为什么我认为，问题是，我已经在"/帖子"的路线上了。但它也应该这样工作！所以我需要一个类似路由链接的东西来替换/刷新路由内容？

这是我的代码：

我的导航栏组件的相关部分：

<ul class="navbar-nav mr-auto">
<li class="nav-item">
<router-link to="/posts" class="nav-link">Posts</router-link>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<div v-for="(tag, index) in tags" class="ml-sm-2">
<h6><span class="badge badge-light" @click="removeSearchTags(index)">{{ tag }}</span></h6>
</div>
<input class="form-control ml-1 mr-sm-2" type="text" v-model="tag" v-on:keyup.enter="pushToTags"
placeholder="Search Gaming, Youtube, DrunkSlut" aria-label="Search">
<router-link :to="{name: 'posts', params: { searchTags: tags }}" reload>
<button type="button" v-if="this.tags.length > 0"
class="btn btn-outline-light my-2 my-sm-0">Search
</button>
</router-link>
</form>

全岗位组件逻辑：

<script>
export default {
name: "posts",
data: function () {
return {
apiUrl: '/getPosts',
posts: '',
submitted: false,
first_page_url: '',
last_page_url: '',
current_page_url: '',
next_page_url: '',
prev_page_url: '',
lastPage: '',
current_page: '',
tags: [],
}
},
methods: {
getPosts: function (url) {
this.$http.get(url).then(function (data) {
this.posts = data.body.data;
this.first_page_url = data.body.first_page_url;
this.last_page_url = data.body.last_page_url;
this.next_page_url = data.body.next_page_url;
this.current_page = data.body.current_page;
this.prev_page_url = data.body.prev_page_url;
this.lastPage = data.body.last_page;
this.current_page_url = '/getPosts?page=' + this.current_page;
});
},
getPostByTags: function (url, tags) {
this.$http.post(url, {
tags: tags
}).then(function (data) {
this.posts = data.body.data;
this.first_page_url = data.body.first_page_url;
this.last_page_url = data.body.last_page_url;
this.next_page_url = data.body.next_page_url;
this.current_page = data.body.current_page;
this.prev_page_url = data.body.prev_page_url;
this.lastPage = data.body.last_page;
this.current_page_url = '/getPostByTags?page=' + this.current_page;
});
},
},
computed: {},
created() {
if (!this.$route.params.searchTags) {
this.getPosts(this.apiUrl);
} else {
this.getPostByTags('/getPostByTags', this.$route.params.searchTags);
}
},
}
</script>

主html文件，vueJS从这里开始。只有导航条组件，这就是它在任何其他路线上的包含方式。

<div id="app">
<navbar></navbar>
<router-view></router-view>
</div>

Answer 1

尝试将created设置为watch

类似于：

watch: {
'$route.params.searchTags': {
deep: true,
immediate: true, // this triggers the watch on component creation, so you can remove the created hook content
handler() {
if (!this.$route.params.searchTags) {
this.getPosts(this.apiUrl);
} else {
this.getPostByTags('/getPostByTags', this.$route.params.searchTags);
}
}
}
}