Transition animation doesn`t work if url was changed (nuxt)

[ktulxu]

There are '/', '/arts', '/arts/:year' routes and different Header, MainPageHeader components with shared elements. On the page '/' i use MainPageHeader. On other pages i use Header.
Firstly, i had an issue with hash in url. For example, if i go from '/' to '/arts#d' and try to go back to '/' transition animation doesn`t work. But if i go to '/arts' and then back the animation works fine.
Also i have the same issue when i go to '/arts' then to '/arts/:year' and then back to '/'. If i reload '/arts/:year' page and then go to '/' animation works fine.
What could be the problem?

[justintaddei]

That is very strange indeed. The issue with the hash might be because the route guards aren't being called? I'll have to look into vue-router's behavior with that.

As for /arts/:year, I haven't seen any issues with url slugs yet. In fact, it seems I have a very similar setup to you on the example page. Would it be possible to share the markup of your shared elements, and your route config?

Also, are you using either the restrictToViewport or restrictToRoutes options?

[ktulxu]

Router.js code generated by nuxt:

export const routerOptions = {
  mode: 'history',
  base: '/',
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/arts",
    component: _d757e9b8,
    name: "arts___ru"
  }, {
    path: "/en",
    component: _3a97a931,
    name: "index___en"
  }, {
    path: "/en/arts",
    component: _d757e9b8,
    name: "arts___en"
  }, {
    path: "/en/arts/:year",
    component: _6e12ee6e,
    name: "arts-year___en"
  }, {
    path: "/arts/:year",
    component: _6e12ee6e,
    name: "arts-year___ru"
  }, {
    path: "/",
    component: _3a97a931,
    name: "index___ru"
  }],

  fallback: false
}

MainPageHeader.vue:

<template>
  <div class="head">
    <div class="head__focus">
      <div class="head__focus-accent">
        <div v-shared-element:logo1="{
            duration: '1000ms'
          }">My
        </div>
        <div v-shared-element:logo2="{
            duration: '1000ms'
          }">Logo
        </div>
      </div>
      <ul class="head__focus-label">
        <li v-shared-element:menu1="{
            duration: '1100ms'
          }">
          <NuxtLink :to="{path: '/arts', hash:'#d'}">arts</NuxtLink>
        </li>
      </ul>
    </div>
  </div>
</template>

Header.vue:

<template>
  <div class="head">
    <div class="container">
      <div class="head__focus">
        <NuxtLink :to="localePath({name: 'index'})">
          <div class="head__focus-accent">
            <div v-shared-element:logo1="{
            duration: '1250ms',
          }">My
            </div>
            <div v-shared-element:logo2="{
            duration: '1250ms'
          }">Logo
            </div>
          </div>
        </NuxtLink>
        <ul class="head__focus-label">
          <li v-shared-element:menu1="{
            duration: '1150ms'
          }"><NuxtLink :to="localePath({name: 'arts-year', params: {year: 2020}})">arts</NuxtLink></li>
        </ul>
      </div>
    </div>
  </div>
</template>

And I`m not using restrictToViewport and restrictToRoute parameters

[justintaddei]

Thank you, I will try to reproduce this after work.