时间戳

首页 > 解决方案 > VueJS 单页模板不会呈现

vue.js - VueJS 单页模板不会呈现

问题描述

我开始学习 Vue。我在网上研究过，它看起来是最简单的开始。

目前我有两个组件：

  1. Galleria.vue ==> 我有一个从 data.json 获取的列表。
  2. Detail.vue ==> 哪个是渲染 data.json 中每个项目的假定模板

好吧，当我单击每个链接并转到 /detail/ID 时，比如说 /detail/1。它不会与 1 的信息一起呈现。

https://w9o45.csb.app/

画廊

    <template>
  <div>
    <ul>
      <li v-for="data in data" :key="$route.params.id">
        <router-link :to="{ path: '/detail/' + data.id }">
          {{ data.id }} - {{ data.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

 

<script>
import data from "../assets/data.json";

export default {
  data() {
    return {
      data: data,
    };
  },
  name: "galleria",
};
</script>

细节.vue

    <template>
      <div>
        <h1>{{ data.name }}</h1>
        <p>{{ data.description }}</p>
      </div>
    </template>
    
    <script>
    import data from "../assets/data.json";
    
    export default {
      data() {
        return {
          data: data,
        };
      },
      name: "Detail",
    };
    </script>

**Router JS**
import Vue from "vue";
import VueRouter from "vue-router";

import Galleria from "./components/Galleria.vue";
import Detail from "./components/Detail.vue";

Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "galleria",
    component: Galleria
  },
  {
    path: "/detail/:data.id",
    name: "Detail",
    component: Detail
  }
];

const router = new VueRouter({
  mode: "history",
  routes
});

export default router;

您可以在此处查看在线代码。

标签： vue.jsvuejs2

解决方案

有3种方法可以解决这个问题：首先你可以使用这个路由器链接：

<router-link :to="{ path: 'detail', query: { id:data.id }}">{{ data.id }} - {{ data.name }}</router-link>
<!-- with query, resulting in `/detail?id=2` -->

第二种可以帮助您的方法是：

<router-link :to="'/detail' + data.id">{{ data.id }} - {{ data.name }}</router-link>

第三种方法是：

<router-link :to="{ name: 'detail', params: { id: data.id }}">{{ data.id }} - {{ data.name }}</router-link>

推荐阅读