Laravel Vue Vue Router 이력 모드

Laravel Vue Vue Router 이력 모드

라라벨, vue 및 vue 라우터를 사용하여 전자상거래 프로젝트를 구축하고 있습니다.

이력 모드로 vue 라우터를 사용하고 싶은데 문제가 발생해요.

여기 제 코드가 있습니다.

new Vue({
    el: '#app',
    router: new VueRouter({
        mode: 'history',
        routes
    })
});

로케일 미들웨어가 있는 web.php의 루트는 다음과 같습니다.

Route::group(['prefix' => '{locale}', 'where' => ['locale' => '[a-zA-Z]{2}'], 'middleware' => 'setlocale'], function () {
    Route::view('/{path?}', ('layouts.app'))->where('path', '.*');
});

여기 vue 라우터가 있는 경로가 있습니다.

export const routes = [
    {
        path: '/',
        component: require('./components/Page/HomePage').default,
    },
    {
        path: '/product',
        component: require('./components/Page/Product/ProductPage').default,
    },
];

내 URL은

http://localhost/en

대신 (해시태그 포함)

http://localhost/en#/

이력 모드를 사용한 후 해시태그를 삭제했습니다.단, 다른 라우터 링크는 내 URL 로케일을 삭제합니다.

http://localhost/product

이제 어떻게 해야 할지 모르겠어요.도와주세요~ 감사합니다.

업데이트 2020년 3월 19일

응용 프로그램의 기본 URL을 Vue Router에 알려주려면 값을 설정해야 합니다.이 경우 로케일 값을 사용하여 동적으로 설정할 수 있습니다.

예를 들어 블레이드템플릿에서는 다음 스크립트를 사용하여 JavaScript 로케일 값을 설정할 수 있습니다.window오브젝트:

<script>
    window._locale = "{{ app()->getLocale() }}";
</script> 

그리고 나서, 그 다음에,base값을 로케일로 설정합니다.

router: new VueRouter({
  mode: 'history',
  base: `/${window._locale}/`,
  routes
})

매우 간단한 방법은 Vue 라우터의 로케일도 수락합니다.따라서 경로는 다음과 같습니다.

export const routes = [
    {
        path: '/:locale',
        children: [
        {
            path: '',
            component: require('./components/Page/HomePage').default,
        },
        {
            path: 'product',
            component: require('./components/Page/Product/ProductPage').default,
        },
        ]
    }
];

하위 경로의 경우 제거 로케일이므로 '/'을(를) 입력하지 마십시오.

언급URL : https://stackoverflow.com/questions/60684527/laravel-vue-vuerouter-history-mode