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

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.

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

我应该 post 一个问题吗？

感谢您的帮助！

Answer 1

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

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

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

关于 postgithub 页面 vue-router 中的一个问题，我不确定这是否有资格被解决/修复，但你肯定可以把它带到他们的通知。修复可能涉及 不重用 组件，这也不理想。所以这对他们来说是一个艰难的呼吁。但是讨论绝对应该很有趣！如果您决定创建一个问题，请 post 在此处支持问题 link :-)

Answer 2

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

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

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

PS。我正在使用 Vue 2.4.1 和 Vue Router 2.7.0

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

Vue.js 2.0 transition on dynamic route not firing

javascript

transition

vue.js

vue-router