如何使用 laravel 到 vue 组件的路由从 url 解析 slug答案

【问题标题】：How to parse slug from url using route of laravel to vue components如何使用 laravel 到 vue 组件的路由从 url 解析 slug
【发布时间】：2019-09-28 08:39:24
【问题描述】：

我想通过使用 laravel 显示路由资源（get）到 vue js 组件的 slug 使用 laravel api 解析数据以显示产品

示例：https://shop.app/product/slug-name

我想将 slug-name 解析到 vue 组件中

export default {
    name: 'product',
    mounted() {
        // console.log('Component mounted.')
        this.fetchData()
    },
    data(){
        return{
            products: [],
            product: {
                id: '',
                name: '',
                slug: '',
                description: '',
                image: '',
                created_at: '',
                updated_at: ''
            }
        }
    },
    methods: {
        fetchData(){
            axios.get('/api/products')
            .then((res) => {
                this.products = res.data
            })
            .catch((err) => {
                console.log(err)
            })
        }
    }
}

我希望输出显示 slug 名称，而不是显示所有产品

【问题讨论】：

我没听懂你说的。你从 laravel api 获取 url。或者你正在打那条路线，然后在 vuejs 中获取当前 url？
是的，我想从打开的页面获取当前的 slug

标签： laravel vue.js

【解决方案1】：

如果你使用 Laravel Routes，你可以像

一样让你的 slug 进入你的 Vue 实例

var slugName = '{{ $slug }}';
export default {
    name: 'product',
    methods: {
        fetchData(){
            //you can use slugNname here
            axios.get('/api/products/' + slugName)
        .then((res) => {
            this.products = res.data
        })
        .catch((err) => {
            console.log(err)
        })
    }
}

之后你可以在你的 axios 请求中使用 slugName

希望对你有帮助

【讨论】：

如果他在 javascript 文件中怎么办。就像他在 vue 组件中所说的那样，意味着 vue 文件。他如何使用刀片
是的，它在 javascript 文件中，我已经更新了我的答案，请检查一下
首先您需要将 slugName 添加到您的 Vue 实例中的数据中，如果您的脚本不在刀片中，您可以直接将数据添加到窗口中，或者我可以推荐这个库来管理如果您经常这样做，则将数据从控制器传输到您的视图。 github.com/laracasts/PHP-Vars-To-Js-Transformer
@RicEz 你检查我的答案了吗

【解决方案2】：

您可以通过

获取当前网址

let currentUrl = window.location.pathname;

然后你可以使用已经包含在 laravel 中的 lodash 库，如果你看到 boostrap.js 文件

let ar = _.split(currentUrl, '/');

它会返回你的数组。它就像 php 中的explode。你可以阅读这个here

最后，得到你的产品

this.productName = _.last(ar);


`_.last` Its will just give you last element of your array which is your product. [here][2] is the documentation

你可以为此制定一个方法。如下所示

    getProductSlug(){

                    let currentUrl = window.location.pathname;
                    let ar = _.split(currentUrl, '/');
                    return _.last(ar);


                },

【讨论】：

这不是完美的方法，但它是解决问题的简单方法。我这样做了，谢谢你的提示。