如何在使用 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');

ItemController

<?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

首先，如果你检查错误：

没有定义属性或方法“item”

并在您的数据代码中检查item：

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

您使用 $ 定义项目，但您使用不带 $ 的项目变量

在 Javascript 中，您不需要使用美元符号定义变量

将其更改为item.vue 和example.vue 中的项目：

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

其次： 检查axios代码：

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

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

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

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

但您没有在控制器中使用 slug 来返回视图 您应该将控制器更改为：

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

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

另一方面 在你的控制器中

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

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

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