尝试找到切换到新页面 VUE 后有效的生命周期挂钩

Question

我有页面转换动画。
我想在转换后找到新的页面元素并更改样式。
我的问题我先更改元素，然后转到一个没有更改此元素的新页面。
此处 link 视频现在是如何工作的 https://www.youtube.com/watch?v=VvmVxd-cmNM

Answer 1

我不确定我是否答对了，但我会尽力回答的

I want after transition find on new page element and change style.

Vue <transition> 有你想知道过渡是否完成的事件。

您也许可以使用 @leave 或 @after-leave。

文档：https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

My problem I first change the element and then go to a new page where this element is not changed.

您的应用程序结构不正确。

我看了视频，看起来这两个页面都包含您的 Nav/Sidebar（正确的部分）内容。

您正在这样构建您的页面：

PageA.vue

<div id="page-a">
  <!-- this is your left side part -->
  <div id="page-a-content"></div>

  <!-- this is your right side part -->
  <div id="sidebar"></div>
</div>

PageB.vue

<div id="page-b">
  <!-- this is your left side part -->
  <div id="page-b-content"></div>

  <!-- this is your right side part -->
  <div id="sidebar"></div>
</div>

App.vue

<div>
  <!-- This shows PageA.vue OR PageB.vue -->
  <router-view />
</div>

你只有改变了left-side部分而不是right-side部分。

你应该这样构造它：

App.vue

<div>
  <!-- This is your left side part. PageA.vue OR PageB.vue -->
  <router-view />
 
  <!-- This is your right side part -->
  <Sidebar />
</div>

当您更改页面时，只有 <router-view /> 会更改，不会 <Sidebar />

尝试找到切换到新页面 VUE 后有效的生命周期挂钩

Trying to find a Lifecycle hook that worked after switching to a new page VUE

hook

lifecycle

vue.js

nuxt.js