Nuxt.js初体验-页面过渡效果不起作用

Nuxt.js初体验-页面过渡效果不起作用

起因

由于本人还未曾使用过 Nuxt.js，所以决定尝试一番看看究竟怎么个事儿！！！

经过

初次体验 Nuxt.js ，当来到Nuxt.js官方文档 过渡效果 这一块被这给卡住了一段时间，具体的问题代码如下：

• 这是A页面组件：

  <template>
    <div>A页面</div>
    <NuxtLink to="/B">to B</NuxtLink>
  </template>
  

• 这是B页面组件：

  <template>
    <div>B页面</div>
    <NuxtLink to="/A">to A</NuxtLink>
  </template>
  

• 过渡效果样式：

  .shade-enter-active,
  .shade-leave-active {
    transition: all 0.4s;
  }
  .shade-enter-from,
  .shade-leave-to {
    opacity: 0;
    filter: blur(1rem);
  }
  

• nuxt.config.ts配置:

  // https://nuxt.com/docs/api/configuration/nuxt-config
  export default defineNuxtConfig({
    app: {
      pageTransition: { name: "shade", mode: "out-in" },
    },
    ...
  });
  

一切看着都是毫无问题的感觉，结果一试...哦吼~ 出问题了。。。

静静的思考了一会后决定再翻翻Nuxt.js官方文档先，没准是自己看漏了呢！

就这样找呀找呀找朋友~，不好意思，找呀找呀找问题，欸嘿！好像发现了一块新大陆：

搜得撕内~ 于是我立马按下鼠标点击这个链接跳转到这块新大陆，呸，Vue官网 嘻嘻 仔细查阅一番，结果就是：

好的我承认是自己不够努力。。。

那么到此就破案了，总结：还得多去阅读阅读文档！

结果

修改后的代码：

• 这是A页面组件：

  <template>
    <div>
        <div>A页面</div>
        <NuxtLink to="/B">to B</NuxtLink>
    </div>
  </template>
  

• 这是B页面组件：

  <template>
    <div>
        <div>B页面</div>
        <NuxtLink to="/A">to A</NuxtLink>
    </div>
  </template>
  

后序

好家伙，后来在阅读文档的时候又发现 Nuxtjs 官方文档中就有提到：

太粗心啦我勒个豆啊！！！