使用一个数据集时的 Vue-router 组件

Posted 2023-02-22

【中文标题】使用一个数据集时的 Vue-router 组件

【英文标题】：Vue-router components when using one data set

【发布时间】：2017-08-20 08:36:34

【问题描述】：

我正在使用 Vue.js 以及它附带的常规设置（vue-router 等）。我遇到了一个问题，使用一个全局数据集（站点上所有项目的 JSON 输出）在查看该视图时返回单个项目的数据。我很困惑我哪里出错了？

我的母版页有这个简单的输出：

<div id="app">
    <router-view></router-view>
</div>

app.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import router from './routes.js';

const app = new Vue(

    router: router,
    data: data
).$mount('#app');

我的 routes.js 文件有以下内容：

import VueRouter from 'vue-router';

var routes = [

    
        path: '/', 
        component: require('./views/Projects.vue')
    ,
    
        name: 'project', 
        path: '/:id', 
        component: require('./views/Project.vue') 
    

]

export default new VueRouter(
    routes: routes
);

我有两个 .vue 组件；项目和项目。

Projects.vue 如下所示，似乎工作正常：

<template>
    <ul>
        <li v-for="project in projects">
             project.title  
            <router-link :to=" name: 'project', params:  id: project.id ">View Details</router-link>
        </li>
    </ul>
</template>

<script>
module.exports = 
  data: function () 
    return data
   

</script>

但是，Project.vue 不起作用。

<template>
  <div>
    <h1> project.title </h1>
    <router-link to="/">Homepage</router-link>
  </div>
</template>

<script>
module.exports = 
  data: function () 
    var project;
    for (var i = 0; i < data.length; i++) 
      if (data[i].id == this.$route.params.id) 
        project = data[i];
        break;
      
    

    return 
      project: project
    
   

</script>

我的 JSON 数据只是设置在页脚包含文件中。

var data = "projects":["id":1080,"title":"Hopton Yard","name":"hopton-yard","size":null,"img":"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1080\/hat_projects_hoptonyard_exterior-001-1.jpg","id":1082,"title":"Science Museum Entrances & Supporters\u2019 Centre","name":"science-museum-entrances-supporters-centre","size":null,"img":"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1082\/hat_projects_science_museum.jpg","id":1084,"title":"Upper & Lower Fosters","name":"upper-lower-fosters","size":null,"img":"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1084\/hat_projects_upper_lower_fosters.jpg","id":1086,"title":"Jerwood Gallery","name":"jerwood-gallery","size":null,"img":"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1086\/hat_projects_jerwood.jpg","id":1101,"title":"High House Artists\u2019 Studios","name":"high-house-artists-studios","size":null,"img":"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1101\/hat_projects_high_house_artists_studios.jpg","id":1115,"title":"Stoke Barn","name":"stoke-barn","size":null,"img":"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1115\/hat_projects_stoke_barn.jpg"]    

【问题讨论】：

我看不到你将任何data传递给Project.vue，基本上那里不存在。

我在var project 等之前尝试过return data，但仍然没有运气。

我的意思是 JSON 数据在任何组件中都不可用，因为我看不到您将它们传递到任何地方......这个想法是在某种根级别中拥有数据，而不是您可以通过 props 将特定数据传递给其他组件。

我将使用我的 app.js 进行更新——数据已设置在那里。

我不知道你想说什么，但是当你想做这样的事情时，你应该有一个返回单个项目的 API 端点——如果你遵循 REST 架构标准。你可以看看我的回购，看看正确的做法github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app如果你有问题，请随时提问

【参考方案1】：

除了一个小错误之外，您的代码可以正常工作。您的全局对象data 不是您要迭代的对象。你想遍历data.projects。

var project;
for (var i = 0; i < data.projects.length; i++) 
  if (data.projects[i].id == this.$route.params.id) 
    project = data.projects[i];
    break;