使用 Vue 路由器但使用相同组件的动态路径上的单页应用程序？

Question

我不确定如何解决我的问题。我需要在特定的动态路径中使用 Vue & Laravel 做一个单页应用程序 (SPA)。

例如：

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

向您显示标题为 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
});

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

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

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

我想到了 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 隐藏整个页面，仅在 mounted/created 时显示。

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

我希望这是可以理解的

谢谢！

Answer 1

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

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

和类似

Vue.config.lang = to.params.lang

在 beforeEnter 期间处理参数。

使用 Vue 路由器但使用相同组件的动态路径上的单页应用程序？

Single Page Application on a dynamic path with Vue Router but using same component?

laravel

vue.js

vue-router

vuejs2