使用Vue Router在动态路径上使用相同组件的单页应用程序？

Question

我不确定如何解决我的问题。我要求使用Vue＆amp ;;进行单页面应用程序（SPA）。 Laravel在特定的动态路径中。

例如：

www.buying.dev/usernameXY/new-fresh-phone

使用Title New Fresh Phone向您展示当前的Sellitem及其描述+ usernameXY和sellitem的图片

在此之下，您可以找到他最受欢迎的商品，也可以找到其他用户的商品。

只是想象它我向你展示了一个超级快速的草图：

所以对于后端我使用Laravel。

Route::prefix('/{username}')->group(function () {
   Route::get('/', 'UserProfileController@show');
   Route::get('/reviews', 'UserProfileController@reviews');

   Route::get('/{selllink}', 'BuyController@show'); //Here comes the SPA
});

如果用户向下滚动，他也会找到其他项目，当他点击它时，网址会变为

 www.buying.dev/usernameYY/new-awesome-gadget

网址的更改不应该刷新整个页面，而只是更新顶部的内容。

对于解决方案来说，我认为是Vue Router，但我从未在Laravel Route和Vue Route同时使用它。

此外，通常只需使用VueRouter组件调用以查看

等页面

routes: [
    {
        path: '/',
        name: 'home',
        component: Home
    }]

但我只会使用一个组件buy.vue。我不知道如何将它结合起来，或许

Route::prefix('/{username}')->group(function () {
    Route::get('/', 'UserProfileController@show');
    Route::get('/reviews', 'UserProfileController@reviews');

    Route::any('/{selllink}', 'BuyController@show')
    ->where(['selllink' => '.*']);
 });

但后来我不知道如何使用Vue Router，因为我该怎么称呼？

    routes: [
    {
        path: '/*/*', // /Username/Itemname ??
        name: 'buy',
        component: buy.vue
    }]

所以我迷失了，我不知道该怎么做。

我的替代方案是我不使用Vue Router，因此无法动态更改URL。

我可以使用v-cloak来隐藏整个页面，只显示它的安装/创建时间。

所以我的问题是，您如何在特定的动态路径上开发单页面应用程序，并且只使用一个组件？或者是否可以在没有Vue Router的情况下更改URL？

我希望这是可以理解的

谢谢！

Answer 1

您可以在vue Router中使用动态路径参数。

path: '/page/:lang/*'
component: MyComponent

等等

Vue.config.lang = to.params.lang 

在beforeEnter期间处理参数。