Question

我将Vue项目设置为使用动态布局-也就是说，假设新页面的布局与最后一页的布局相同，那么布局会在页面之间持久。我的问题是，当我转到具有不同布局的路由时，会创建并销毁router-link组件，然后再次创建它，这给我带来了一些问题。我的设置如下：

App.vue

RADIUS - 0.19247088246067331
START ANGLE - 0
d3.min.js:2 Error: <path> attribute d: Expected number, "… 
247088246067331LNaN,NaNZ".
RADIUS - 0.17262855312217748
START ANGLE - 0.5235987755982988

某些路由器视图组件

<template>
  <component :is="layout">
    <router-view :layout.sync="layout" />
  </component>
</template>

<script>
import LayoutPortal from '@/layouts/LayoutPortal';
import LayoutOffline from '@/layouts/LayoutOffline';
import LayoutDefault from '@/layouts/LayoutDefault';

export default {
  name: 'App',

  components: {
    LayoutPortal,
    LayoutOffline,
    LayoutDefault,
  },
...

默认布局

<template>
...
</template>

<script>
import LayoutDefault from '@/layouts/LayoutDefault';

export default {
    ...

    created() {
        this.$emit('update:layout', LayoutDefault);
    },
}
</script>

tldr;

如果您使用动态布局设置项目，请在线上遵循许多教程中的任何一个，当导航到布局与上一页不同的路线时，将创建，销毁新的路由器视图组件，然后再次创建。这会导致诸如mount（）调用加倍等问题。

Answer 1

我最终选择了嵌套（子）路线（https://router.vuejs.org/guide/essentials/nested-routes.html）：

ResizeMode="NoResize"

通过这种方式，我可以将布局作为父路径加载，将beforeEnter逻辑分为单独的路径组，并避免在使用新布局的页面上两次加载组件的问题。

Vue动态布局两次安装路由器视图组件

tldr;

1 个答案: