Laravel + Vue router - slug 的最佳实践

Question

我有一个 laravel + vue 应用程序。我为一个名为 shop 的特定页面创建了一个 vue spa 应用程序。在这个商店中，我有 3 个子页面，分别是关于、产品和联系方式。

routes.php

Route::get('/shop/{slug}/{vue_capture?}', 'ShopController@show')->where('vue_capture', '[\/\w\.-]*');

vue-router.js

export const routes = [
  { path: '/', component: Home, name: 'home',
    children: [
      {
        path: '/',
        name: 'about',
        component: About
      },
      {
        path: '/products',
        name: 'products',
        component: Product
      },
      {
        path: '/contact',
        name: 'contact',
        component: Contact
      } 
    ]
  },
];

因此，例如我转到域。com/shop/joe-shop，提取 slug 并将其用于我的 vue 应用程序以便我可以向服务器发出带有 slug 参数的 http 请求的最佳做法是什么？谢谢

注意：我也在我的应用程序中使用 vuex 状态管理

Answer 1

var slug = window.location.pathname.replace(/^\/shop\/([^\/]+)(?:\/.*)?/i,'');

注：

根据您当前的设置，您需要在 vue-router 配置中设置 base 属性才能正常运行。

new Router({
    base: window.location.pathname.replace(/^(\/shop\/[^\/]+).*/i,''),
    mode: 'history',
    routes: ...
})

Laravel + Vue router - slug 的最佳实践

Laravel + Vue router - Best practice for slugs

laravel

vue.js

vue-router

vuejs2