0

我是一名学生，我正在使用 Vue 和 Laravel 做一个送餐项目。

对于前台，我使用 Vue 和后台 Laravel。我有我的 front.blade.php 和里面，我有 id="app" 的 div

APP VUE

<template>
  <div>
    <Header />
    <main>
      <router-view></router-view>
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

 export default {
   name: "App",

   components: {
    Header,
     Footer,
   },
 };
 </script>

然后在我的主页中，我有一个名为餐馆的部分，我在其中使用 axios 调用呈现我数据库中的所有餐馆。

<div class="container">
  <h1>sono la Homepage</h1>
  <ul>
    <RestaurantCategories/>
    <Restaurants/>
  </ul>
  </div>
</template>

<script>
import RestaurantCategories from '../components/RestaurantCategories';
import Restaurants from '../components/Restaurants';

export default {
    components: {
      RestaurantCategories,
      Restaurants
    }
}

我的 api http://127.0.0.1:8000/api/restaurants给我这个

{
"success": true,
"data": [
{
"id": 1,
"name": "Romano",
"email": "hettinger.burnice@zulauf.biz",
"email_verified_at": null,
"description": "I pranzi in famiglia non sono il tuo forte, vieni da noi e i tuoi parenti ti ringrazieranno!",
"address": "Via Liberta, 23",
"piva": "42434406409",
"slug": "romano",
"img_path": "restaurant_covers/seeder_images/file.jpg",
"created_at": "2021-12-07T17:14:25.000000Z",
"updated_at": "2021-12-07T17:14:25.000000Z"
},
{
"id": 2,
"name": "Pulcinella",
"email": "jaren13@yahoo.com",
"email_verified_at": null,
"description": "Cucina siciliana moderna a base di ingredienti stagionali in un locale minimal arredato con lampadine sospese.",
"address": "Via Liberta, 23",
"piva": "35435684082",
"slug": "pulcinella",
"img_path": "restaurant_covers/seeder_images/chinese-food.jpg",
"created_at": "2021-12-07T17:14:25.000000Z",
"updated_at": "2021-12-07T17:14:25.000000Z"
},
{
"id": 3,
"name": "Romano",
"email": "zrosenbaum@greenholt.com",
"email_verified_at": null,
"description": "I pranzi in famiglia non sono il tuo forte, vieni da noi e i tuoi parenti ti ringrazieranno!",
"address": "Via Garibaldi, 2",
"piva": "53320142888",
"slug": "romano-2",
"img_path": "restaurant_covers/seeder_images/chinese-food.jpg",
"created_at": "2021-12-07T17:14:25.000000Z",
"updated_at": "2021-12-07T17:14:25.000000Z"
},
{
"id": 4,
"name": "Romano",
"email": "kpfannerstill@yahoo.com",
"email_verified_at": null,
"description": "I pranzi in famiglia non sono il tuo forte, vieni da noi e i tuoi parenti ti ringrazieranno!",
"address": "Piazza della Vittoria, 12",
"piva": "79919300361",
"slug": "romano-3",
"img_path": "restaurant_covers/seeder_images/spanish-cuisine.jpg",
"created_at": "2021-12-07T17:14:25.000000Z",
"updated_at": "2021-12-07T17:14:25.000000Z"
},

我的目标是在我所有的餐厅上创建一个路由器链接，以显示带有 slug 的动态单一餐厅。

<template>
  <section class="container">
    <ul>
      <li v-for="restaurant in restaurants" :key="restaurant.id"><router-link to="">{{ restaurant.name }}</router-link></li>
    </ul>
  </section>
</template>

<script>
export default {
  name: "Restaurants",
  data() {
    return {
      restaurants: [],
    };
  },
  mounted() {
    axios
      .get("/api/restaurants")
      .then((response) => {
        //handle success
        this.restaurants = response.data.data;
      })
      .catch((error) => {
        //handle error
        console.log(error);
      });
  },
};
</script>

这是我的 router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

import Home from "./pages/Homepage.vue";
import Restaurant from "./pages/Restaurant.vue";
import NotFound from "./pages/NotFound.vue";




const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/restaurant/:slug',
            name: 'Restaurant',
            component: Restaurant
        },
        {
            path: '/*',
            name: 'not-found',
            component: NotFound
        },
    ],
});

export default router;

我能做些什么？？？非常感谢。

4

0 回答 0