VueJS заменяет данные компонента // та же проблема маршрута

Question

У меня есть маршрут '/ posts'. Этот маршрут 'posts' имеет функцию create (), которая выбирает данные из API через GET и выводит данные на страницу.

Теперь у меня есть навигационная панель, которая есть на каждой странице. У этой панели навигации теперь есть поле ввода, где я могу искать определенные сообщения по тегам. Эта функция поиска на основе тегов уже работает и работает через POST для API.

Теперь проблема:

Я пишу некоторые теги в поле ввода в навигации и ищу их. Если я в настоящее время не на маршруте сообщений, поиск работает нормально, и меня перенаправляют на маршрут сообщений, и я вижу тег, связанный с сообщениями.

Если я напишу некоторые теги в поле ввода навигационной панели и нажму кнопку поиска, пока я уже на маршруте сообщений, ничего не произойдет.

Так что, если я нахожусь на каком-либо другом пути, кроме '/ posts', поиск по тегам работает отлично.

Вот почему я думаю, проблема в том, что я уже на маршруте '/ posts'. Но это также должно работать так! Поэтому мне нужно что-то вроде ссылки на маршрут, которая заменяет / обновляет содержимое маршрута?

Вот мой код:

Соответствующая часть моего компонента navbar:

<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. Существует только компонент navbar, так как он включен в любой другой маршрут.

<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);
            }
        }
    }
}