laravel - 如何使用 VueJS 和 Vue-router 在 Laravel 应用程序中使用 url 参数获取数据

Question

我正在制作一个带有列表页面和详细信息页面 (Item.vue) 的应用程序。从列表中，用户可以使用 localhost/item/12345 等 url 转到详细信息页面。但是我无法使用 VueJS 和 Vue-router 为我的 Laravel 应用程序制定逻辑。

Laravel 5.4，

节点 6.11，npm 3.10.10，

axios 0.15.3，vue 2.3.4，vue-router 2.6.0

我的代码如下

Example.vue(用作列表页)

<template>
 <p class="card-text"><router-link v-bind:to="{ name:'item', params:{ id: item.id }}">
  {{ item.title }}</router-link>
 </p>
</template>
<script>
 export default {
  data(){
   return{
    $item:[]
   }
  },
  mounted(){
   var self = this;
   axios.get('/item').then(function(response){
    return self.item = response.data;
   });
  }
 }
</script>

Item.vue

<template>
 <p class="card-text">{{item.title}}</p>
 <p class="card-text">{{item.content}}</p>
</template>
<script>
 export default {
  data(){
   return{
    $item:[]
   }
  },
  mounted(){
   var self = this;
   axios.get('/item'+this.$route.params.slug
   ).then(function(response){
    return self.item = response.data;
   });
  }
 }
</script>

routes.js

import VueRouter from 'vue-router';
var routes=[
 {
  name:'item',
  path:'/item/:id',
  component:require('./components/Item.vue'),
  props: true
 }
];
export default new VueRouter({
 routes
});

routes/web.js

Route::resource('item','ItemController');
Route::resource('item/{id}', 'ItemController@show');

项目 Controller

<?php
 namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use App\Items;

 class ItemController extends Controller
 {
  public function index()
  {
   return Items::all();
  }
  public function show($id)
  {
   $item = Items::where('id', '=', $id)->firstOrFail();
   return view('item.show', compact('item'));
  }
 }

app.js

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

require('./bootstrap');
window.Vue = require('vue');
Vue.use(VueRouter);

Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
 router,
 el: '#app'
});

列表页显示警告信息

[Vue warn]: Property or method "item" is not defined on the instance but referenced 
during render. Make sure to declare reactive data properties in the data option.
found in
---> <Item> at /var/www/laravel/resources/assets/js/components/Item.vue
 <Root>

详情页面的错误信息

Error: Request failed with status code 500

Answer 1

首先，如果检查错误:

Property or method "item" is not defined

并检查数据代码中的item:

  data(){
   return{
    $item:[]
   }
  },

你用 $ 定义了 item 但你使用了没有 $ 的 item 变量

在 Javascript 中你不需要用美元符号定义变量

在 item.vue 和 example.vue 中将其更改为 item:

  data(){
   return{
    item:[]
   }
  },

其次:检查 axios 代码:

axios.get('/item'+this.$route.params.slug

意思是用get方法调用路由/itemslug但是我在路由器中没有看到这样的路由定义，但是如果你把/放在这样的项目之后:

axios.get('/item/'+this.$route.params.slug

它会将您的获取网址更改为:/item/slug

但是你没有在你的 Controller 中使用 slug 来返回 View 您应该将 Controller 更改为:

  public function show($slug)
  {
   $item = Items::where('slug', '=', $slug)->firstOrFail();
   return view('item.show', compact('item'));
  }

或将 this.$route.params.slug 更改为 this.$route.params.id

另一方面在你的 Controller 中

  public function show($id)
  {
   $item = Items::where('id', '=', $id)->firstOrFail();
   return view('item.show', compact('item'));
  }

如你所见，show 方法将集合返回到 item.show View ，如果你想直接使用 axios 获取数据，你应该返回 View 而不是你可以这样做

  public function show($id)
  {
   return $item = Items::where('id', '=', $id)->firstOrFail();
  }