Vue Js - 如何从 url 获取 slug？

Question

让我举例说明我正在工作。我的项目在 laravel 5.* 中。我提到了first 和second 链接，但没有运气。

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

当我打开 http://localhost/gift_india/brand/baskin-robbins 网址时，它会调用 brand_detail.blade.php 文件，所以这个网址 baskin-robbins 是我的蛞蝓。所以我想将 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、Cafe Coffee Day 等。

现在，如果我点击 Baskin Robbins 品牌，那么它会被称为以下路线：

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

return view('brand_detail');
});

当这个brand_detail刀片模板打开我的url就像http://localhost/gift_india/brand/baskin-robbins所以我想从这个url传递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'
})