Как разобрать слаг из URL, используя маршрут laravel для определения компонентов

Question

Я хочу проанализировать данные, чтобы показать продукт с помощью slug из ресурса laravel show route (get) для компонентов vue js с помощью laravel api

пример: https://shop.app/product/slug-name

я хочу разобрать имя slug в 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)
            })
        }
    }
}

Я ожидаю, что на выходе отобразится имя слага, а не все продукты.

Answer 1

Вы можете получить текущий URL по

let currentUrl = window.location.pathname;

и затем вы можете использовать библиотеку lodash, которая уже включена в laravel, если вы видите boostrap.js файл

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

он вернет ваш массив. это так же, как explode в php. Вы можете прочитать об этом здесь

и, наконец, получите ваш продукт по

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);


                },

Answer 2

Если вы используете Laravel Routes, вы можете подключить свой слаг к своему экземпляру 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)
        })
    }
}

после этого вы можете использовать slugName в своем запросе axios

надеюсь, это поможет