Question

让我解释一下我正在工作的例子。我的项目是在laravel 5. *。我提到first和second链接但没有运气。

我有2个文件 brand_detail.blade.php 和 brand_detail.js

当我打开 http://localhost/gift_india/brand/baskin-robbins url时，它会调用 brand_detail.blade.php 文件，以便在此网址 baskin-robbins 是我的slu ..所以我想将 baskin-robbins 传递给vue js，并希望获得此品牌商品的数据。

brand_detail.blade.php文件

<div id="container_detail">
<brand-detail></brand-detail>
</div>

<template id="brand-detail-template">

@{{detail}}

</template>

brand_detail.js档案

Vue.component('brand-detail', {

template: '#brand-detail-template',

data: function(){

    return {

        detail: []

    }

},

created: function(){
    var slug = this.$route.params.slug; // here I'm getting error that Uncaught TypeError: Cannot read property 'params' of undefined
    console.log(slug);



    axios.get('brand_detail/:slug')
        .then(function (response) {
            console.log(response.data);

        })
        .catch(function (error) {
            console.log(error.data);
        });
}
});

new Vue({

el: '#container_detail'

})

在我的 blade_detail.blade.php 文件中，我包含了以下js文件。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

更新

我使用了laravel 5.3，因此路由在routes / web.php文件中定义，我的路由如下所示。

当我从品牌列表页面点击任何品牌时，使用以下路线：例如：我有12个品牌列表页面，如 Baskin Robbins ， United Colors of Benetton ，咖啡馆咖啡日等。

现在，如果我点击 Baskin Robbins 品牌，那么它将在下面的路线中调用：

Route::get('/brand/{slug}', function () { 

return view('brand_detail');
});

当这个brand_detail刀片模板打开我的网址时就像http://localhost/gift_india/brand/baskin-robbins所以我想通过 baskin-robbins 向vue js传递并希望调用下一条路径来获取所有数据 baskin-robbins 品牌。

Answer 1

当您使用laravel router时，您可以使用此变量$slug获取slug。你需要在你的vue实例中得到这个。从这个answer中获取灵感，你应该可以做以下事情：

<强> brand_detail.js

var slug = '{{ $slug }}';

Vue.component('brand-detail', {

  template: '#brand-detail-template',
  data: function(){
  ...
  ...
  //use slug variable
  ...
  ...

如果您使用的是vue-router

您收到错误，因为this.$route未定义，您没有在vue实例中注入路由器。

确保在Vue初始化中添加路由器对象，请参阅此工作fiddle。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // short for routes: routes
})

// Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router,  
  el: '#container_detail'
})

Vue Js - 如何从网址获取slug？

1 个答案: