动态路由上的Vue.js 2.0转换未触发 [英] Vue.js 2.0 transition on dynamic route not firing

问题描述

我发现转换不会在带参数的动态路由上触发。例如下面的代码，当我在 / chapter / 1 时，我去了 / chapter / 2 那里没有过渡。但当我在 / chapter / 1 时，我去 / profile / 1 就有一个！

I found that transition is not firing on dynamic route with parameters. For exemple with the code below, when I am in /chapter/1 and I go to /chapter/2 there is no transition. But when I am in /chapter/1 and I go to /profile/1 there is one !

main.js file

require('normalize.css')

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Panel from './components/Panel'
import Profile from './components/Profile'

window.bus = new Vue()

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
     { path: '/', redirect: '/chapter/1' },
     { name:'chapter', path: '/chapter/:id', component: Panel},
     { name:'profile', path: '/profile/:id', component: Profile}
  ]
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

App.vue 模板

<template>
  <div id="app">

    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>

    <div class="controls">
      <router-link :to="{ name: 'chapter', params: { id: Math.max(1, parseInt($route.params.id) - 1) }}">
        Prev
      </router-link>
      <router-link :to="{ name: 'chapter', params: { id: parseInt($route.params.id) + 1 }}">
        Next
      </router-link>
    </div>
  </div>
</template>

可能是因为vue-router没有销毁父组件？我没有找到从代码运行转换的方法。我在 vue-router示例包上尝试了此配置，行为是相同。

Maybe is due to the fact that vue-router doesn't destroy the parent component ? I didn't found a way to run the transition from the code. I tried this configuration on vue-router example pack and the behavior is the same.

来自 doc

使用params路由时需要注意的一点是当用户从/ user / foo导航到/ user / bar时，将重用相同的组件实例。由于两个路由都呈现相同的组件，因此这比销毁旧实例然后创建新实例更有效。但是，这也意味着不会调用组件的生命周期钩子。

One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.

要对同一组件中的params更改作出反应，您只需观察$ route对象

To react to params changes in the same component, you can simply watch the $route object

---

我应该发布一个问题吗？

---

Should I post an issue ?

感谢您的帮助！

推荐答案

您能否查看此工作示例： https://jsfiddle.net/mani04/dLnz4rbL/

Can you check this working example: https://jsfiddle.net/mani04/dLnz4rbL/

我试图使用在元素之间转换在文档中。

在我的小提琴示例中，我主要使用您的问题描述中的代码，我使用转换组件内的包装器，如下所示：

In my fiddle example, which mostly uses the code from your question description, I used a transition wrapper within component, as shown below:

<transition name="fade" mode="out-in">
    <div class="page-contents" :key="$route.params.id">
        This is my chapter component. Page: {{parseInt($route.params.id)}}
    </div>
</transition>

该文件指明我们需要提供密钥为Vue.js创建不同的元素所以我添加了您的章节ID作为密钥。

The document specifies that we need to provide a key to make them distinct elements for Vue.js. So I added your chapter ID as key.

我不知道这是一个黑客还是一个正确的解决方案，我只在2周前从Angular2迁移到了Vue。但是，除非有人为您提供更好的解决方案，否则您可以使用此方法来获取动态路径的转换。

I don't know if this is a hack or a proper solution, I moved from Angular2 to Vue only 2 weeks ago. But till someone gives you a better solution, you may use this method to get your transitions for dynamic routes.

关于将此作为问题发布在<$ c的github页面中$ c> vue-router ，我不确定这是否有资格得到解决/修复，但你肯定会提醒他们注意。修复可能涉及不重用组件，这也不理想。所以对他们来说这是一个艰难的要求。但讨论肯定会很有趣！如果您决定创建一个，请在此处回复问题链接： - ）

Regarding posting this as an issue in github page of vue-router, I am not sure if this qualifies to be addressed / fixed, but you may definitely bring it to their notice. Fix may involve not reusing components, which is also not ideal. So it is a tough call for them. But the discussion should definitely be interesting! Please post back the issue link here if you decide to create one :-)

这篇关于动态路由上的Vue.js 2.0转换未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！