在 Vuejs 中使用静态 JSON 进行动态路由

Posted

技术标签:

【中文标题】在 Vuejs 中使用静态 JSON 进行动态路由【英文标题】:Dynamic routing with static JSON in Vuejs 【发布时间】:2018-11-04 08:11:15 【问题描述】:

我有一个静态本地 JSON 文件,其中包含我的内容。我正在使用VueResourcesVueRouter。我的目标是制作一个列表组件,用于在本地 JSON 文件中显示项目。然后,如果用户单击某个项目,则在另一个页面中显示该项目的内容。为此,我使用了$route.params

这是我的列表组件。我称它为 Objects.vue

<template>
  <div id="objects">
    <router-link :to="'/' + this.lists.id"><div v-for="(item, index) in lists" class="list"> item.title   item.id </div></router-link>
  </div>
</template>

<script>
//import json from './../assets/data.json'
export default 
  name: 'Objects',
  data() 
    return 
      lists: [],
    ;
  ,
  methods: 
    getObjects() 
       this.$http.get('/static/data.json')
          .then((response) => 
            console.log(response.body);
            this.lists = response.body.objects;
          )
    
  ,
  mounted() 
    this.getObjects();
    console.log(this.lists.id);
  
;
</script>

<style scoped>

</style>

这是我的项目组件。我称之为 Object.vue

<template>
  <div id="object">
    <div>
       object.id 
    </div>
    <div>
       object.title 
    </div>
  </div>
</template>

<script>
import json from './../assets/data.json'
export default 
  name: 'Object',
  data() 
    return 
      id: this.$route.params.id,
      object: ,
    ;
  ,
  methods: 
    getObjects() 
       this.$http.get('/static/data.json/' + this.id)
          .then((response) => 
            console.log(response);
            this.object = response.body.objects;
          )
    
  ,
  mounted() 
    this.getObjects();
  
;
</script>

基本上是我的 json 文件


  "objects": [
    
      "id": 0,
      "title": "a"
    ,
    
      "id": 1,
      "title": "b"
    ,
    
      "id": 2,
      "title": "c"
    ,
    
      "id": 3,
      "title": "d"
    ,
    
      "id": 4,
      "title": "e"
    ,
    
      "id": 5,
      "title": "f"
    ,
    
      "id": 6,
      "title": "g"
    ,
    
      "id": 7,
      "title": "h"
    ,
    
      "id": 8,
      "title": "i"
    ,
    
      "id": 9,
      "title": "j"
    
  ]

路由/index.js 文件

import Vue from 'vue';
import Router from 'vue-router';
import Visit from '@/components/Visit';
import Objects from '@/components/Objects';
import Community from '@/components/Community';
import Instagram from '@/components/Instagram';
import Object from '@/components/Object';

Vue.use(Router);
export default new Router(
  routes: [
    
      path: '/',
      name: 'Objects',
      component: Objects,
    ,
    
      path: '/Visit',
      name: 'Visit',
      component: Visit,
    ,
    
      path: '/Community',
      name: 'Community',
      component: Community,
    ,
    
      path: '/Instagram',
      name: 'Instagram',
      component: Instagram,
    ,
    
      path: '/:id',
      name: 'Object',
      component: Object,
    ,
  ],
);

列表组件工作正常并显示每个项目。但问题是,当我单击一个项目时,id 会返回undefined。出于这个原因,尝试显示http://localhost:8080/undefined

我该如何处理?我错过了什么?

【问题讨论】:

【参考方案1】:

this.lists.id 始终未定义。我们的this.lists 是一个数组。您应该将路由器放在 v-for 中并访问 item.id

应该是

<div v-for="(item, index) in lists" class="list" :key="item.id">
  <router-link :to="'/' + item.id">
    item.title   item.id 
  </router-link>
</div>

更新

作为讨论,您可以更新您的 Object.vue

<template>
  <div id="object">
    <div>
       object.id 
    </div>
    <div>
       object.title 
    </div>
  </div>
</template>

<script>
export default 
  name: 'Object',
  data() 
    return 
      id: this.$route.params.id,
      object: ,
    ;
  ,
  methods: 
    getObjects() 
       this.$http.get('/static/data.json')
          .then((response) => 
            console.log(response);
            this.object = response.body.objects.find(item => item.id == this.id)
          )
    
  ,
  mounted() 
    this.getObjects();
  
;
</script>

或者如果你可以导入 data.json

<template>
  <div id="object">
    <div>
       object.id 
    </div>
    <div>
       object.title 
    </div>
  </div>
</template>

<script>
import json from './../assets/data.json'
export default 
  name: 'Object',
  data() 
    return 
      id: this.$route.params.id,
      object: ,
    ;
  ,
  mounted() 
    this.object = json.objects.find(item => item.id == this.$route.params.id)
  
;
</script>

【讨论】:

以上是关于在 Vuejs 中使用静态 JSON 进行动态路由的主要内容,如果未能解决你的问题,请参考以下文章

如何根据路由参数动态改变vuejs方法?

ThinkPHP5静态地址路由和动态路由的区别?

Vuejs 组件路由动态选择

静态路由和动态路由的区别

实验三 静态路由与动态路由

动态路由器与静态路由器的理论知识