AS title sates，我不太需要解决方案，但我不明白为什么我会得到不想要的结果；
运行v2 vue.js
我在一个单独的组件文件中有一个vue组件。
基本上，vue应该呈现数据(目前是从"excerciseModules"导入的，这是JSON格式(。
它是动态的，因此基于url路径，它决定从json中提取什么，然后将其加载到页面中，但渲染是在此之前完成的，我不确定为什么。我创建了其他在概念上做同样事情的视图，它们工作得很好。我不明白为什么这不一样。
我选择了这种方式，这样我就不必创建大量的路由，但可以在一个视图组件中处理逻辑(下面的这个(。
Quesiton就是为什么数据加载是空的(它在第一次加载时使用空的"TrainingModules"加载，然后加载"旧"数据
示例url路径是"；https/模块1"=页面加载空
下一次
url路径是"；https/模块2〃＝页面加载模块1
下一次
url路径是"；https/模块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>
我不能告诉你为什么你的代码不工作，因为它是一个不完整的例子，但我可以带你通过一个最小的工作例子来完成你想要完成的事情。
你想做的第一件事是确保你的vue路由器配置正确。
export default new Router({
mode: "history",
routes: [
{
path: "/",
component: Hello
},
{
path: "/dynamic/:type",
component: DynamicParam,
props: true
}
]
});
这里我配置了一个路由，它有一个与参数匹配的动态路由，通常称为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>
正如你所看到的，我有一个道具，它与这个组件上可用的鼻涕虫的名称相匹配。每当url中的"slug"发生变化时，我的道具也会发生变化。为了对这些更改做出反应，我设置了一个观察程序来调用一些代码。这是您可以进行fetch/axios/xhr调用以获取真实数据的地方。但是，由于您是临时从JSON文件加载数据，所以我在这里做的操作与您类似。每当观察者检测到更改时(或者第一次因为我设置了immediate: true(，我都会将这些数据分配给组件上的数据值。
我创建了一个代码沙盒，其中有一个工作演示：https://codesandbox.io/s/vue-routing-example-forked-zesye
附言：当创建一个最小的示例问题来隔离有问题的代码时，你会发现人们更容易接受并渴望帮助。你可以在这里阅读更多信息：https://stackoverflow.com/help/minimal-reproducible-example