Как подавить выборку в родительском представлении (Vue. js) - PullRequest
Новая
       23

Как подавить выборку в родительском представлении (Vue. js)

0 голосов
/ 13 июля 2020

У меня есть приложение View. js, которое включает в себя два вида - Articles. vue и Article. vue - таким образом, что Article. vue вложена в статьи. Вот как ведут себя эти представления:

  1. Когда срабатывает событие жизненного цикла Articles created (), это представление выбирает список учетных записей через HTTP и отображает ссылки на Article. vue в v -для l oop.

  2. Затем пользователь может щелкнуть статью в представлении статей. Это связано с дочерними статьями. vue, которые затем показывают подробности статьи.

Проблема, с которой я столкнулся, заключается в том, что при выполнении шага 2 представление «Статьи» воссоздается (т. Е. событие created () запускается повторно, и список статей повторно извлекается без надобности.) Это вызывает нежелательную задержку и мигание экрана sh, что делает приложение менее отзывчивым.

Я бы хотел чтобы вид статей отображался только один раз, а не каждый раз при нажатии на статью. Как я могу sh это сделать?

Я действительно получаю желаемое поведение, если включаю компонент «Статьи» непосредственно на домашнюю страницу, вместо того, чтобы ссылаться на него как на представление с домашней страницы. Однако, поскольку представление статей предназначено для отображения только тогда, когда пользователь выбирает эту функцию, это прямое включение не является жизнеспособным подходом. маршрут от повторного рендеринга. Однако keep-alive слишком широк, так как я действительно хочу, чтобы родительское представление перезагружалось, если родительская ссылка vue будет нажата снова (то есть для получения новых статей); Я просто не хочу, чтобы представление перезагружалось, если щелкнули дочернюю ссылку vue.

Возможно, ответ лежит в Navigation Guards: https://router.vuejs.org/guide/advanced/navigation-guards.html

Однако я новичок в Vue и не могу проанализировать документацию по этой функции, чтобы прийти к своему решению.

Ниже приведен соответствующий код:

Статьи 

<template>
  <div class="hello">
    <br />
    <div v-for="Article in Articles" :key="Article.ArticleID">
        <router-link :to="{name: 'Article', params: {'ArticleID': Article.ArticleID}}">{{Article.ArticleName}}</router-link>
    </div>
    <br />
    <router-view :key="$route.path"></router-view>
  </div>
</template>

<script>

    export default {
        name: "Articles",
        data() {
            return {
                Articles: []
                }
        },
        mounted() {
            this.getArticles();
        },
        methods: {
            getArticles: function() {
                console.log("Getting data");
                const url = "http://localhost:8001/articles"

                fetch(url)
                .then( (response) => {
                    console.log("Converting data to json");
                    return response.json();
                })
                .then( (data) => {
                    if (typeof(data[0].ArticleID)=="undefined") {
                        console.log("No data found.");
                    } else
                    {
                        console.log("Data found");
                        this.Articles = data;
                    }
                })
                .catch( err => console.log("Error retrieving data: " + err));
            }
        }
    }

</script>

Раздел маршрутов 

  {
    path: "/articles",
    name: "Articles",
    component: () =>
      import(/* webpackChunkName: "y" */ "../views/Articles.vue"),
    children: [
      {
        path: "/article/:ArticleID",
        name: "Article",
        props: true,
        component: () => 
          import(/* webpackChunkName: "z" */ "../components/Article.vue")
      }
    ]
  }
...