vuejs router-link가 느린 로드 경로에서 작동하지 않음

vuejs router-link가 느린 로드 경로에서 작동하지 않음

이 가이드에 따라 라우터를 설정합니다.https://router.vuejs.org/en/advanced/lazy-loading.html

const PageWaitingRoom= () => import(/* webpackChunkName: "group-CCManageBusiness" */'./../pages/customer-care/manage-business/PageWaitingRoom');
const Routes = [
  {
      path: '/customer-care/manage-business/waiting-room',
      component: PageWaitingRoom,
      name: PageWaitingRoom.name
   }
]

다른 페이지에서는 다음과 같이 라우터 링크를 사용합니다.

<router-link class="nav-link text-uppercase"
             :to="{name: 'PageWaitingRoom'}"
             exact>
        Waiting Room
</router-link>

웹 팩을 사용하여 UglifyJsPlugin을 사용하여 프로덕션 빌드를 만들면 라우터 링크는 URL을 해결하지 않고 항상 루트 URL을 가리킵니다.router-link를 변경하지 않도록 해야 합니다.name다음과 같습니다.

<router-link class="nav-link text-uppercase"
             to="/customer-care/manage-business/waiting-room"
             exact>
      Waiting Room
</router-link>

단, 이 방법으로는 하고 싶지 않습니다.라우터 링크에서 컴포넌트 이름을 사용하는 것을 참조합니다.앞으로 URL을 쉽게 변경할 수 있기 때문입니다.

이 문제는 UglifyJsPlugin을 사용하는 경우에만 발생하며 무엇이 부족한지 잘 모르겠습니다.나처럼 이 문제에 직면한 사람이 있나요?조언해 주세요.

감사합니다!

원하는 버전을 사용하려면 다음과 같이 망글링을 비활성화해야 합니다.

new webpack.optimize.UglifyJsPlugin({
  mangle: false
})

이것에 의해, 루트명의 혼란은 정지합니다만, 코드의 난독화도 정지합니다.Google 검색을 통해 문제가 있는지 여부를 확인할 수 있습니다.찬성하는 사람도 있고, 아니라고 하는 사람도 있다.

최신 앱에서 이 옵션을 비활성화했습니다.누군가 충분히 결정되면 이름을 바꿀 수 있습니다.PageWaitingRoom로.xyz그들을 멈추지는 못할 거야. 단지 속도를 늦출 뿐이야.

사실은 스트링으로 루트를 명명하지는 않았지만name대신 다음과 같이 루트 이름으로 컴포넌트를 지정하면 내 멍청한 문제가 발생합니다(웃음).

    const Routes = [
      {
          path: '/customer-care/manage-business/waiting-room',
          component: PageWaitingRoom,
          name: PageWaitingRoom.name //<-- UglifyJsPlugin will do its business and cause the route issue.
          //name: 'PageWaitingRoom' <-- Should use this
       }
    ]

언급URL : https://stackoverflow.com/questions/47958670/vuejs-router-link-not-working-in-lazy-loading-routes