动态路由上的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示例包中尝试了这个配置,行为是一样的.

---

从文档中引用

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

要对同一组件中的params更改做出反应,您只需观察$ route对象即可

---

我应该发布一个问题吗？

谢谢你的帮助 !

Answer 1

你能看看这个工作实例: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作为关键.

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

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

Answer 2

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

所以,我试图把key在<router-view>来代替.它的工作原理!工作示例:https://codepen.io/widyakumara/details/owVYrW/

不确定这是否是正确的做事方式,我有点使用vue.

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