Question

我正在设置我的路由器遵循本指南 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>

一切正常，直到我使用webpack使用UglifyJsPlugin进行生产构建，路由器链接不解析url，它总是指向root url。我必须将路由器链接更改为不使用name，如下所示：

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

但是我不想这样做，我指的是在路由器链接中使用组件名称，因为我很快就会很容易在将来更改网址。

这个问题只发生在我使用UglifyJsPlugin时，我不确定我错过了什么。有人像我这样面对这个问题吗？请给我建议。

谢谢！

Answer 1

如果您希望首选版本正常工作，则需要禁用修改，如下所示：

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

这应该可以阻止它弄乱您的路由名称，但请注意，这也会阻止代码的混淆。您可以进行Google搜索以确定这是否是一个问题。有些人说是，其他人没有。

我在我的最新应用中禁用了此选项，其原因是如果有人确定了，PageWaitingRoom重命名为xyz并不会阻止他们，只会让他们放慢速度。

Answer 2

实际上我没有用字符串命名路由，但是我使用了组件的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
       }
    ]

vuejs router-link无法在延迟加载路由中工作

2 个答案: