Getting navigation duplicated error while the route is being replaced on Vue-Router

Question

I have a problem with vue router as defined on the title above.

Let's say I have a router-view which is renders pages dynamically when the user selected a page from the page selector component. What I'm expecting is I have to get the url to be like this:

http://localhost:port/editor/{appSlug}/layout-editor/page/{pageSlug}

But instead, I got this:

http://localhost:port/editor/{appSlug}/layout-editor/page/{pageSlug}-randomString

And the console shows this error:

NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/editor/penerimaa…/page/input-pendaftaran-edrpekvl") is not allowed", stack: "Error↵ at new NavigationDuplicated (webpack-int…/node_modules/vue/dist/vue.runtime.esm.js:3876:9)"}`

I already checked the router file and still can't find out what is wrong with my route. I also tried the solution from this question but still having this error.

Can somebody please help me with this?

Please take a look at my code:

router.js

import Vue from 'vue'
import Router from 'vue-router'
import store from './store/index'

import Home from './views/home/Index.vue'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  routes: [{
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      // route level code-splitting
      // this generates a separate chunk (login.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('./views/auth/Login.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('./views/auth/Register.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/forgot-password',
      name: 'forgot-password',
      component: () => import('./views/auth/extras/ForgotPassword.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/database',
      name: 'database',
      component: () => import('./views/database/Index.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/third-parties',
      name: 'third-parties',
      component: () => import('./views/third-parties/Index.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/editor',
      component: () => import('./components/ViewRenderer.vue'),
      meta: {
        requiresAuth: true,
        requiresAdmin: true,
        requiresEditor: true,
      },
      children: [{
        props: true,
        path: ':appSlug/layout-editor',
        name: 'layout-editor',
        component: () => import('./views/editor/Index.vue'),
        children: [{
          props: true,
          path: 'page/:pageSlug',
          name: 'layout-renderer',
          component: () => import('./components/LayoutRenderer.vue'), // this is where the error occured.
        }],
      }]
    },
  ]
})


// Route Middlewares
router.beforeEach((to, from, next) => {
  const isLoggedIn = store.getters['auth/isLoggedIn']

  // Role getters
  const isAdmin = store.getters['auth/isAdmin']
  const isEditor = store.getters['auth/isEditor']

  // Redirect to the login page if the user is not logged in
  // and the route meta record is requires auth
  if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
    next('/login')
  }

  // Redirect to the homepage page if the user is logged in
  // and the route meta record is requires guest
  if (to.matched.some(record => record.meta.requiresGuest) && isLoggedIn) {
    next('/')
  }

  // Redirect to the preview page if the user is logged in
  // but has no role assigned or the role is user
  if (to.matched.some(
      record => (
        record.meta.requiresAuth &&
        record.meta.requiresAdmin &&
        record.meta.requiresEditor
      )) && isLoggedIn && isAdmin !== true && isEditor !== true) {

    next('/')

  }

  // Pass any access if not matches any of conditions above
  next()
})

export default router

Editor/Index.vue

<template>
  <div class="layout-editor container-fluid">
    <ActivityBar></ActivityBar>

    <Sidebar title="Layout Editor">
      <PalleteControl></PalleteControl>
      <Pallete :items="components" :list-style="pallete"></Pallete>
    </Sidebar>

    <Navbar class="editor-navbar">
      <PageSelector></PageSelector>
      <BaseButton id="create-page-button" text="Create new page"></BaseButton>
    </Navbar>

    <!-- Every selected page layout rendered here -->
    <ViewRenderer></ViewRenderer>

    <CommitBar></CommitBar>
  </div>
</template>

<script>
  import components from "@/data/components.json";
  import data from "@/data/table.json";
  import { mapGetters } from "vuex";

  export default {
    name: "LayoutEditor",

    data() {
      return {
        components,
        pallete: "grid"
      };
    },
    computed: {
      ...mapGetters({
        current: "apps/current" // Get current app
      })
    },
    mounted() {
      this.listenPalleteEvent();
      this.listenPageSelectorEvent();
    },
    methods: {
      listenPalleteEvent() {
        EventBus.$on("switch-list-style", () => this.switchPallete());
      },
      switchPallete() {
        if (this.pallete == "grid") return (this.pallete = "list");
        return (this.pallete = "grid");
      },
      listenPageSelectorEvent() {
        EventBus.$on("page-selected", component => {
          this.$router.replace({
            name: "layout-renderer",
            params: { pageSlug: component.pageSlug, component }
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .layout-editor {
    padding-left: 530px;
  }
</style>

components/PageSelector.vue

<template>
  <BaseDropdown
    id="pages-dropdown-button"
    id-obj="pageId"
    name-obj="pageName"
    :items="filtered"
    :has-item-control="true"
    text="Create new page or choose one from here"
    event-keyword="page-selected"
  >
    <BaseInput
      name="page-filter"
      v-model="filter"
      :borderless="true"
      placeholder="Search by page name..."
    ></BaseInput>

    <template #item-control>
      <div class="item-control">
        <BaseButton id="duplicate-page-button" text="Duplicate"></BaseButton>
        <BaseButton id="delete-page-button" text="Delete"></BaseButton>
      </div>
    </template>
  </BaseDropdown>
</template>

<script>
  import { mapGetters } from "vuex";

  export default {
    data() {
      return {
        filter: ""
      };
    },

    created() {
      // Dispatch fetch page request on vuex store when the instance was created.
      this.$store.dispatch("pages/load", this.currentApp);
    },

    computed: {
      // Map getters from vuex store.
      ...mapGetters({
        pages: "pages/pages",
        currentApp: "apps/current"
      }),

      // Filter pages as long as user type in the dropdown input.
      filtered() {
        return this.pages.filter(page => {
          return page.pageName.toLowerCase().includes(this.filter.toLowerCase());
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../sass/variables";

  ::v-deep .dropdown-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
      .item-control {
        opacity: 1;
      }
    }
  }

  ::v-deep .item-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;

    .form-group {
      margin-bottom: 0;
    }

    .form-group .btn {
      border-radius: 30px;
      height: auto;
    }

    .form-group:first-child .btn {
      margin-right: 5px;
    }

    .form-group:last-child .btn {
      background-color: $red;
      border-color: $red;
      color: white;
      &:hover {
        background-color: darken($color: $red, $amount: 3);
      }
    }
  }
</style>

components/ViewRenderer.vue

<template>
  <router-view />
</template>

components/LayoutRenderer.vue

<template>
  <div class="layout-renderer">
    <GridLayout
      :layout.sync="components"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="false"
      :responsive="true"
      :auto-size="true"
    >
      <GridItem
        v-for="component in components"
        :key="component.i"
        :x="component.x"
        :y="component.y"
        :w="component.w"
        :h="component.h"
        :i="component.i"
      >
        <ComponentRenderer :component="component" />
      </GridItem>
    </GridLayout>
  </div>
</template>

<script>
  import { mapState } from "vuex";
  import VueGridLayout from "vue-grid-layout";

  export default {
    components: {
      GridLayout: VueGridLayout.GridLayout,
      GridItem: VueGridLayout.GridItem
    },
    data() {
      return {
        components: []
      };
    },
    created() {
      this.fetchComponents();
    },
    methods: {
      /**
       * Fetch component from the backend based on the pageId
       * occured by the vue-router's route parameters.
       *
       * @return void
       */
      fetchComponents() {
        let pageId = this.$route.params.component.pageId;
        this.$store.dispatch("components/fetchComponents", pageId).then(() => {
          this.components = this.$store.getters["components/components"];
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .layout-renderer {
    margin-bottom: 100px;
  }

  @media only screen and (max-width: 501px) {
    .vue-grid-item {
      height: fit-content !important;
      transform: none !important;
      position: relative !important;
      margin-bottom: 10px;
    }
  }

  @media (hover: none), (hover: on-demand) {
    .vue-grid-item {
      height: fit-content !important;
      transform: none !important;
      position: relative !important;
      margin-bottom: 10px;
    }
  }
</style>

Answer 1

While joyBinary's answer solves the problem, it also swallows all other errors which might not be the desired behaviour.

This approach solves this issue:

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err
  });
}

Answer 2

For those using Typescript, here's Errik Sven Puudist's answer converted:

const originalPush = Router.prototype.push;
Router.prototype.push = async function (location: RawLocation) {
  let route: Route;
  try {
    route = await originalPush.call<Router, [RawLocation], Promise<Route>>(this, location);
  } catch (err) {
    if (err.name !== 'NavigationDuplicated') {
      throw err;
    }
  }

  return route!;
}