【问题标题】：How to route dynamic content?如何路由动态内容？
【发布时间】：2019-09-19 05:58:48
【问题描述】：

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

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

这是我的问题：

用户点击 Soraname 页面路由到 Soraname 页面 - (soraname.vue) 加载组件 Autor.vue - 发送 prop 或参数加载 Soraname 内容

基本上，Page A 路由到 Page A View，加载带有 Page A 内容的组件。点击页面B、C、D时有效。每个人都使用相同的组件，但改变了内容数据。

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

我试过了：

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 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

谢谢！

【问题讨论】：

标签： vue.js vue-cli-3

【解决方案1】：

在我看来你不需要 vuex 你需要一个获取数据的父组件（也许是布局）有一个计算属性，它传递给子组件，计算属性是你想要的数据，它会在什么时候更新您的子组件发出一个更改，该更改触发一个事件以更改其依赖项之一。所以基本上父母处理数据传递给孩子，并根据孩子发出的事件进行更改。

【讨论】：

【解决方案2】：

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

为了清楚起见，您的路线应该有一个参数来识别所选作者（姓氏、身份证等）——您在指定路线时使用:surname 来执行此操作。然后你的组件被加载并从路由this.$route.params.surname 中读取参数，然后使用它从远程服务器/vuex 中加载数据

【讨论】：

谢谢！我会试试这个！