Laravel + Vue路由器-鼻涕虫的最佳实践

Question

我有一个拉里+ vue应用程序。我为一个叫做商店的特定页面创建了一个vue spa应用程序。在这个商店，我有三个分页是关于，产品和联系。

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
      } 
    ]
  },
];

例如，我访问domain.com/shop/joe，提取该段塞并在vue应用程序中使用它的最佳实践是什么，这样我就可以向服务器发出带有段塞参数的http请求？谢谢

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

Answer 1

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

注：

使用当前的设置，您需要在vue-路由器配置中设置base属性才能正常运行。

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