Как маршрутизировать динамический контент? - PullRequest
Новая
       8

Как маршрутизировать динамический контент?

0 голосов
/ 30 апреля 2019

Я дизайнер внешнего интерфейса и пытаюсь понять, как использовать VueJS.

Мой github: https://github.com/soraname/mangarou

Вот моя проблема:

Пользователь щелкает страницу Soraname. Перейти к странице Soraname - (soraname.vue). Загрузить компонент Autor.vue - отправить объект или параметр. Загрузить содержимое Soraname.Страница Содержание.Действительно, если нажать Страница B, C, D. Каждый использует один и тот же Компонент, но изменяет данные содержимого.

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

Я пробовал это:

soraname.vue (View)

<template>
  <div class="soraname content-box">
    <Autor v-bind="soraname"></Autor>
  </div>
</template>

Загрузка компонента Autor.vue 

<template>
<div id="Autor">
  <div class="row">
      <div class="col s12 autor-header">
        <img :src="pageautor.Logo" width="128"> <h1>{{pageautor.Nome}}</h1>
      </div>
    </div>
  <div class="row">
    <div class="col s12 autor-header">
      <h3>Bio</h3>
      <p>{{pageautor.Bio}}</p>
    </div>
  </div>
</div>
</template>

<script>
export default {
      name: 'autor',
      components: {
      },
      data() {
        return {
            pageautor: {
              Nome: "Soraname3333", 
              Bio: '/soraname', 
              Logo: '/assets/media/logos/soraname.png',  
              Color: 'purple accent-3',
              links: [
                {
                  Item: 'LINKSoraname', 
                  Elo: '/soraname', 
                  Text: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ', 
                  Img: '/autores/soraname/link01.png'
                }
              ],
              mangas: [
                {
                  Titulo: 'MANGASoraname', 
                  Elo: '/soraname', 
                  Sinopse: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
                  Img: '/assets/media/logos/soraname.png'
                }
              ]
            },
            soraname: {
              Nome: "SoranamDDDe", 
              Bio: '/soraname', 
              Logo: '/assets/media/logos/soraname.png',  
              Color: 'purple accent-3',
              links: [
                {
                  Item: 'LINKSoraname', 
                  Elo: '/soraname', 
                  Text: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ', 
                  Img: '/autores/soraname/link01.png'
                }
              ],
              mangas: [
                {
                  Titulo: 'MANGASoraname', 
                  Elo: '/soraname', 
                  Sinopse: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
                  Img: '/assets/media/logos/soraname.png'
                }
              ]
            }
          }
      },
      methods: {
      }
    };
</script>

Маршрутизатор: https://github.com/soraname/mangarou/blob/master/src/router.js Просмотр Soraname (страница A): https://github.com/soraname/mangarou/blob/master/src/views/soraname.vue Autor.vue (Компонент): https://github.com/soraname/mangarou/blob/master/src/components/Autores/Autor.vue

Спасибо!

Ответы [ 2 ]

0 голосов
/ 01 мая 2019

По моему мнению, вам не нужен vuex, вам нужен родительский компонент (возможно, макет), который получает данные, имеет вычисляемое свойство, которое он передает дочернему компоненту, вычисляемое свойство - это данные, которые вы хотите, они будут обновляться, когдаВаш дочерний компонент генерирует изменение, которое вызывает событие, чтобы изменить одну из его зависимостей.Таким образом, в основном родительские данные обрабатывают данные, передаваемые потомку, и изменяются в зависимости от событий, генерируемых потомком.

0 голосов
/ 30 апреля 2019

В большинстве случаев данные поступают с удаленного сервера, вы можете использовать свой компонент для вызова AJAX и сохранить результат, однако лучшим подходом будет использование VUEX в качестве централизованного состояния - с При таком подходе вы также сможете использовать авторские данные для нескольких компонентов без необходимости передавать их снова и снова.

Чтобы было понятно, ваш маршрут должен иметь параметр для идентификации выбранного автора (фамилия, идентификатор, что угодно) - вы делаете это с помощью :surname при указании маршрута. Затем ваш компонент загружается и считывает параметр из маршрута this.$route.params.surname, а затем использует его для загрузки данных с удаленного сервера / vuex

...