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

Question

我发现转换没有在带有参数的动态路由上触发。例如下面的代码，当我在/chapter/1 并转到/chapter/2 时，没有转换。但是当我在/chapter/1 并且我去/profile/1 时，有一个！

main.js文件

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 example pack 上试过这个配置，行为是一样的。

---

引用doc

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

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

---

我应该发布问题吗？

感谢您的帮助！

Answer 1

带着同样的问题来到这里，@Mani 的回答很好。 但我不太喜欢使用两个<transition>s 的想法。

所以我尝试将key 放在<router-view> 中。它有效！ 工作示例：https://codepen.io/widyakumara/details/owVYrW/

不确定这是否是正确的 vue 做事方式，我是使用 vue 的新手。

附言。我正在使用 Vue 2.4.1 和 Vue Router 2.7.0

Answer 2

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

我尝试使用文档中Transitioning Between Elements 中描述的方法。

在我的小提琴示例中，主要使用问题描述中的代码，我在组件中使用了 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。但在有人给你更好的解决方案之前，你可以使用这种方法来获得动态路线的过渡。

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