vue-routerの初期コンポーネントだけパラメーター付にできない

Question

vue-routerの初期ページだけパラメーター付にできない

Lravelで構築しているサイトの中に部分的にVueアプリを配置しています。
Vueアプリのトップ用のコンポーネントのpathをpath: '/'としてURL'http://xxx.com/test/'(アプリのトップURL)にアクセスした場合は
トップ用のコンポーネントが表示され、2つ目のコンポーネントもトップ用のコンポーネント内から
<router-link>でパラメーターも取得でき正しく動作しています。

このトップページにもidというパラメーターを持たせたいのですが
path: '/:id'としてURL'http://xxx.com/test/(数字)'にアクセスすると<router-view>の中身だけ表示されません。

パラメーター付のコンポーネントを<router-link>以外から表示にはどうすればいいでしょうか？

const router = new VueRouter({
    base: 'http://xxx.com/test/',
    mode: 'history',
    routes: [
        { path: '/', component: aaa },　←これをパラメーター付にしたい
        { path: '/item/:num', component: bbb },　←これはaaaからのリンクで正しく表示されている
    ],
});

const app = new Vue({
    router,
    }
}).$mount('#app');

laravel blade
@extends('layouts.parent')
@include('layouts.header')
@section('main')
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="js/app.js"></script>
@endsection
@include('layouts.footer')

Answer 1

laravelのルーティングに制約する必要があるらしいです。

次は、こちらのブログから引用したものなんですが

//routes/web.php
// 全てのURLでapp.blade.phpを表示
Route::get('/{any}', function () {
    return view('layouts.app');
})->where('any', '.*');

また、laravelのガイドでも参考できると思います
正規表現制約