Сохранить в живых view-router по ключевому параметру - PullRequest
Новая
       9

Сохранить в живых view-router по ключевому параметру

0 голосов
/ 30 июня 2018

Как сохранить Vue-Router с разными параметрами отдельно?

TL: DR

Давайте рассмотрим пример, когда мы разрабатываем такой сайт, как Facebook. У каждого пользователя есть страница профиля. Поскольку есть много пользователей, мы не хотим перебирать всех пользователей и загружать все страницы профиля при загрузке, как показано ниже 

<template v-for="profile in profilePages">
   <profile-page :data="profile" v-show="this.route.params['id'] === channel.id"/>
</template>

Общий подход будет следующим:

router.js 

{
  component: ProfileWrapper,
  path: '/profile',
  children: [
    {
      path: ':id',
      component: ProfilePage
    }
  ]
}

ChannelsPage 

<keep-alive>
   <router-view :=key="$route.fullPath"></router-view>
</keep-alive>

Но вот в чем проблема. Поскольку пользователь заходит на чью-то страницу и уходит, я хочу, чтобы маршрутизатор где-то оставил его в кеше или просто скрыл его. В моем конкретном случае пользователь посещает максимум 2-3 профиля и часто переключается между ними. А переключение требует больших затрат времени, потому что в нем много DOM.

Могу ли я сделать это с vue-router и keep-alive ?

EDIT

Пожалуйста, проверьте песочницу . Каждый раз, когда вы переключаетесь между страницами (# 1, # 2, # 3, # 4) Vue создает новые компоненты ProfileInnerComponent с нуля (не из кеша, как v-show). Это заметно, проверяя красный div, вызывается хук create из ProfileInnerComponent, который генерирует событие, а App добавляет div с текущим временем.

Ответы [ 2 ]

0 голосов
/ 01 июля 2018

Я не уверен, правильно ли я понимаю, но предположим, что у вас есть 2 страницы.

Администраторы и пользователи, и каждая страница имеет counter, который изначально равен 0.

То есть, когда вы находитесь на странице «Администраторы» и увеличиваете счетчик, при переходе на другую страницу и возвращении обратно на страницу «Администраторы» счетчик будет таким, каким вы его оставили.

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

ПРИМЕЧАНИЕ , что в примере с песочницей иллюстрирует логику, как этого добиться. Никогда не используйте keep-alive в router-view в App.vue.

0 голосов
/ 01 июля 2018

Чтобы это работало, вам нужны уникальные имена в ваших компонентах, которые вы затем использовали бы для свойства include в <keep-alive>. 

<keep-alive include="Foo,Bar">
  ...
</keep-alive>

В вашем случае вам лучше будет использовать динамические компоненты, а не один маршрут. 

<component :is="$route.params.id"></component>

поддержание динамических компонентов

ссылка на API поддержки активности

обновление

Предварительная выборка содержимого канала на основе идентификатора параметра запроса: 

// routes.js
routes = [
  {
    path: '/channel/:id',
    name: 'show.channel',
    props: true,
    component: Channel
  }
  ...
]

// Channel.vue
import axios from 'axios'

export default {
  data () {
    return {
      content: ''
    }
  }
  beforeRouteEnter(to,from,next) {
    axios.get('/api/channel/' + to.params.id).then(response => {
      next(vm => {
        vm.content = reponse.data
      })
    })
  },
  watch: {
    '$route' (to, from) {
      // fetch new channel content when a query param is changed.
    }
  }
}
...