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

物品控制器

<?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:[]
   }
  },

您使用 $ 定义项目，但您使用没有 $

的项目变量

在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

它会将您的 url 更改为：/item/slug

但是您没有在控制器中使用 slug 来 return 查看您应该将控制器更改为：

  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'));
  }

如你所见，显示方法 return 集合到 item.show 视图，如果你想直接用 axios 获取数据，你应该 return 视图而不是你可以这样做

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

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

How can I get the data with using url parameter in a Laravel application using VueJS and Vue-router

laravel

vue.js

vue-router

axios