Как вернуться на первую страницу из пагинации?

Question

[Mike]

У меня есть App-header.vue компонент и BlogFeed.vue компонент. В BlogFeed.vue посты с пагинацией. У меня не получается вернуться на первую страницу из пагинации. К примеру, находясь в 3 <<1...2...3...4...5>> я жмякаю на ссылку в App-header.vue чтоб вернуться

<router-link :to="{name: 'blog}">Blog</router-link>

, но ничего не происходит, ошибок в консоле нет. Ссылка рабочая, не работает только в этом случае. Я могу сделать в BlogFeed.vue компоненте чтоб меня возвращало на первую страницу из пагинации, но это не совсем то что мне нужно, нужно чтоб по ссылке из App-header.vue меня перекидывало в корень моего блого. Тут по-моему проблема из-за одинакого router'a. Vue.js не собирается идти туда где уже находится.

router.js

{
        path: '/', component: Blog, // здесь мой App-header.vue
        children: [
            {path: '/', component: BlogFeed, name: 'blog'}, // здесь мои посты с пагинацией
            {path: '/post/:id/', component: Detail, name: 'post_detail'},
            {path: '/about/', component: About, name: 'about'},
            {path: '/post/category/:id/', component: PostCategories, name: 'post_categories'},
            {path: '/search-result', component: SearchResult, name: 'search_result'},
        ]
    },

Может как то можно перезагрузить компонент BlogFeed.vue ?

Answer 1

[0xD34F]

Сделайте номер страницы параметром маршрута - тогда не будет проблем переходить откуда угодно не только на первую страницу, но и любую другую.

UPD. Разверну немного свою мысль. Как я понял, это продолжение вашего предыдущего вопроса.

Компонент с пагинацией - при смене страницы вместо установки текущей активной страницы будет выполняться $router.push, сама текущая страница из свойства компонента станет его параметром и будет браться из параметров маршрута. Примерно так. Не знаю, похоже ли это на то, что вам надо, если нет - кидайте свой код в песочницу, тогда возможно, смогу подсказать точнее.

Comments

[Mike]

Здравствуйте. Сделал с необязательным параметром. Если переходить по ссылкам пагинатора то в браузере отображается номер страницы пагинатора. Watch следит за изменением $route в BlogFeed.vue. Если $route.path === '/' (то есть я нажал на ссылку в App-header.vue которая ведёт к '/', тогда переходить на первую страницу пагинатора. Вообщем вся эта конструкция работает, уверен что это не есть гуд, ну да ладно.

router.js

path: '/', component: Blog,
        children: [
            {path: '/:id?', component: BlogFeed, name: 'blog'},
            ... ... ...

BlogFeed.vue

<template>
    <div>
        <paginate name="posts" ref="paginator" :list="this.posts" :per="2" class="paginate-list">
            <div v-for="post in paginated('posts')" :key="post.id">
                <b-card>
                    <h3><router-link :to="{ name: 'post_detail', params: {id: post.id} }">{{ post.title }}</router-link></h3>
                    {{ post.body }}
                </b-card>
            </div>
        </paginate>
        
        <paginate-links for="posts" 
        @change="PageChange" 
        :show-step-links="true"
        >
        </paginate-links>
    </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
    name: 'BlogFeed',
    data() {
        return {
            paginate: ['posts'],
            toPage: 2,
        }
    },
    computed: {
        ...mapGetters([
            'posts',
        ]),
    },
    methods: {
        },
        PageChange(toPage, fromPage) {
            this.$router.push({path: '/' + toPage})
        },
        get_posts() {
            this.$store.dispatch('GET_POSTS')
        }
    },
    watch: {
        $route() {
            if (this.$route.path === '/') {
                this.$refs.paginator.goToPage(1)
            }
        }
    },
    created() {
        this.get_posts()
    }  
}
</script>

[0xD34F]

Mike, зачем watch? - сложно и выглядит стрёмно. Сделайте как в примере выше - параметр маршрута используется как параметр компонента, параметр компонента имеет дефолтное значение - которое и применяется при переходе к "/".