Vue Js - 如何从 url 获取 slug？

Posted 2023-02-22

【中文标题】Vue Js - 如何从 url 获取 slug？

【英文标题】：Vue Js - How to get slug from url?

【发布时间】：2017-05-30 22:34:17

【问题描述】：

让我举例说明我正在工作。我的项目在 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 品牌。

【参考方案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'
)

【讨论】：

在这里提出问题之前，我检查了jsfiddle.net/yyx990803/xgrjzsup，但我不明白如何在我的项目中添加该代码，所以你能给我举个例子吗？我的路线是localhost/gift_india/brand_details/:slug。

@watson 你在哪里定义了路由，你能添加那个代码吗？

我已经更新了我的问题，以便您了解我的路线。

但是如何将 var slug = ' $slug '; 从刀片模板传递到 vue js 文件？我没有任何线索。

this 可能会有所帮助。