soraname.vue（查看）

Question

我是前端设计师，试图弄清楚如何使用VueJS。

我的github：https://github.com/soraname/mangarou

这是我的问题：

用户单击Soraname页面路由到Soraname页面-（soraname.vue）加载组件Autor.vue-发送道具或参数加载Soraname内容

基本上，“页面A”到“页面A视图”的路由，将“页面A”内容加载到组件中。如果单击B，C，D页，则有效。每个人都使用相同的组件，但更改内容数据。

我不知道该怎么做，传递一个变量来设置应加载哪些数据。

我已经尝试过了：

soraname.vue（查看）

<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

谢谢！

Answer 1

在大多数情况下，数据来自远程服务器，您可以使用组件进行AJAX调用并存储结果，但是更好的方法是将VUEX用作集中状态-这种方法您还可以跨多个组件使用作者数据，而无需一遍又一遍地传递。

为清楚起见，您的路线应具有一个用于标识所选作者的参数（姓，名或其他）-您在指定路线时使用:surname进行操作。然后，将加载您的组件并从路由this.$route.params.surname中读取参数，然后使用它从远程服务器/ vuex中加载数据

Answer 2

我认为您不需要vuex，您需要一个父组件（也许是布局），该组件获取的数据具有计算属性，该属性将传递给子组件，该计算属性是您想要的数据，它将在以下时间更新您的子组件会发出更改，该更改触发一个事件以更改其依赖项之一。因此，基本上父级处理将数据传递给子级并根据子级发出的事件进行更改。

如何路由动态内容？

soraname.vue（查看）

加载组件Autor.vue

2 个答案: