Vue.js 渲染时通过 vue.router 参数动态填充内容

Question

如标题所述，我不太需要解决方案，但我不明白为什么我会得到不想要的结果；

运行 v2 vue.js

我在单个组件文件中有一个 vue 组件。

基本上 vue 应该呈现数据（目前正在从“excerciseModules”导入，这是 JSON 格式）。

IT 是动态的，因此基于 url 路径，它决定从 json 中拉出什么，然后将其加载到页面中，但渲染是在这之前完成的，我我不确定为什么。我已经创建了其他视图，这些视图在概念上做同样的事情并且它们工作正常。我不明白为什么这是不同的。

我选择了这种方式，所以我不必创建大量路由，但可以在一个视图组件（下面的这个组件）中处理逻辑。

问题是为什么加载的数据是空的（它在第一次加载时使用空的“TrainingModules”加载，然后加载“旧”数据。

示例 url 路径为“https...../module1”= 页面加载为空

下一个

url 路径是“https..../module 2”= 页面加载模块 1

下一个

url 路径是“https..../module 1”= 页面加载模块 2

//My route
{

        path: '/excercises/:type',
        name: 'excercises',
        props: {
        },
        component: () => import( /* webpackChunkName: "about" */ '../views/training/Excercises.vue')
    }

<template>
<div class="relatedTraining">
    <div class="white section">
        <div class="row">
            <div class="col s12 l3" v-for="(item, index) in trainingModules" :key="index">
                <div class="card">
                    <div class="card-content">
                        <span class="card-title"> {{ item.title }}</span>
                        <p>{{ item.excercise }}</p>
                    </div>
                    <div class="card-action">
                        <router-link class="" to="/Grip">Start</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>


<script>
    console.log('script');
    let trainingModules; //when initialized this is empty, but I would expect it to not be when the vue is rendered due to the beforeMount() in the component options. What gives?
/* eslint-disable */
let init = (params) => {
    console.log('init');
    console.log(trainingModules);
    trainingModules = excerciseModules[params.type];
   

    //return trainingModules
    
}
import { getRandom, randomImage } from '../../js/functions';
import { excerciseModules } from '../excercises/excercises_content.js'; //placeholder for JSON
export default {
    name: 'excercises',
    components: {
    },
    props: {
    },
    methods: {
        getRandom,
        randomImage,
        init
    },
    data() {
        return {
            trainingModules,
        }
    },
    beforeMount(){
        console.log('before mount');
        init(this.$route.params);
    },
    updated(){
        console.log('updated');
        
    },
    mounted() {
        
        console.log('mounted');
        //console.log(trainingModules);
    }
}

</script>

Answer 1

我无法告诉您为什么您的代码不起作用，因为它是一个不完整的示例，但我可以引导您完成一个最小的工作示例，它可以完成您想要完成的任务。

您要做的第一件事是确保您的 vue-router 配置正确。

export default new Router({
  mode: "history",

  routes: [
    {
      path: "/",
      component: Hello
    },
    {
      path: "/dynamic/:type",
      component: DynamicParam,
      props: true
    }
  ]
});

这里我配置了一个路由，它有一个 dynamic route matching 和一个参数，通常称为 slug，名称为 type。通过在路径中的 slug 之前使用 : ，我告诉 vue-router 我希望它成为路由参数。我还设置了 props: true，因为这样可以将 slug 值作为道具提供给我的 DynamicParam 组件。这样很方便。

我的 DynamicParam 组件如下所示：

<template>
  <div>
    <ul>
      <li v-for="t in things" :key="t">{{ t }}</li>
    </ul>
  </div>
</template>

<script>
const collectionOfThings = {
  a: ["a1", "a2", "a3"],
  b: ["b1", "b2"],
  c: [],
};

export default {
  props: ["type"],
  data() {
    return {
      things: [],
    };
  },
  watch: {
    type: {
      handler(t) {
        this.things = collectionOfThings[t];
      },
      immediate: true,
    },
  },
};
</script>

如您所见，我有一个与此组件上可用的 slug 名称相匹配的道具。每当 url 中的 'slug' 改变时，我的道具也会改变。为了对这些变化做出反应，我设置了一个 watcher 来调用一些代码。您可以在此处进行 fetch/axios/xhr 调用以获取真实数据。但是由于您是临时从 JSON 文件加载数据，所以我在这里做的事情与您类似。每当观察者检测到变化（或第一次因为我设置了 immediate: true。

时，我将此数据分配给组件上的数据值

我创建了一个 codesandbox，其中包含一个工作演示：https://codesandbox.io/s/vue-routing-example-forked-zesye

PS：当创建一个最小的示例问题来隔离有问题的代码时，您会发现人们更容易接受并且更愿意提供帮助。您可以在此处阅读更多相关信息：https://whosebug.com/help/minimal-reproducible-example

Vue.js 渲染时通过 vue.router 参数动态填充内容

Vue.js on render populate content dynamically via vue.router params

javascript

vue.js

vue-router

vue-component

vuejs2