动态路由上的 Vue.js 2.0 转换未触发

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

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 示例包并且行为是相同的。

引用自doc

使用带有参数的路由时需要注意的一件事是，当用户从 /user/foo 导航到 /user/bar 时，将重用相同的组件实例。由于两条路由渲染相同的组件，因此这比销毁旧实例然后创建新实例更有效。然而，这也意味着组件的生命周期钩子不会被调用。

要对同一组件中的参数更改做出反应，您可以简单地观察 $route 对象

我应该发布问题吗？

感谢您的帮助 ！

你能检查一下这个工作示例吗：https://jsfiddle.net/mani04/dLnz4rbL/

我尝试使用下面描述的方法元素之间的转换在文档中。

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

<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>

该文件规定我们需要提供key使他们不同的元素对于 Vue.js。所以我添加了你的章节 ID 作为密钥。

我不知道这是一个 hack 还是一个正确的解决方案，我仅 2 周前就从 Angular2 迁移到了 Vue。但是，在有人给您提供更好的解决方案之前，您可以使用此方法来获得动态路线的转换。

关于将此问题发布在 github 页面中vue-router，我不确定这是否有资格解决/修复，但你绝对可以提请他们注意。修复可能涉及不重复使用组件，这也并不理想。所以这对他们来说是一个艰难的决定。但讨论绝对应该很有趣！如果您决定创建一个问题，请在此处发回问题链接:-)