如何路由动态内容？

Question

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

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

这是我的问题：

用户单击Soraname页面Route to Soraname页面 - （soraname.vue）加载组件Autor.vue - 发送prop或参数Load Soraname内容

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

我不知道该怎么做，传递一个变量来设置Data应该加载什么。

我试过这个：

soraname.vue (View)

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

Load the Component 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 View（页面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你需要一个父组件（可能是布局），它获取数据有一个计算属性，它传递给子组件，计算属性是你想要的数据，它将在你的子组件时更新发出一个更改，触发事件以更改其中一个依赖项。所以基本上父处理数据会传递给子节点，并根据子节点发出的事件进行更改。