Vue Js - 如何从 url 获取 slug？

Question

让我举例说明一下，我是 working.My 项目在 laravel 5.*。我提到了 first and second 个链接，但没有成功。

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

当我打开 http://localhost/gift_india/brand/baskin-robbins url 时，它会调用 brand_detail.blade.php 文件等等 url 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 blade 模板打开时，我的 url 就像 http://localhost/gift_india/brand/baskin-robbins 所以从这个 url 我想通过 baskin-robbins 到 vue js 并想调用下一条路线以获取 baskin-robbins 品牌的所有数据。

Answer 1

当您使用 laravel router, you can get slug using this variable $slug. You need to get this in your vue instance. Getting inspiration from this 时，您应该能够执行如下操作：

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 - 如何从 url 获取 slug？

Vue Js - How to get slug from url?

vue.js

vue-router

laravel-5.3

vuejs2