Question

我有一条'/ 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);
            }
        }
    }
}

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

1 个答案: