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

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

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

我应该发布一个问题吗？

感谢您的帮助！

Answer 1

您能否查看此工作示例：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作为密钥。

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

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

Answer 2

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

所以我尝试将key改为<router-view>。它的工作原理！工作示例：https://codepen.io/widyakumara/details/owVYrW/

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

PS。我正在使用Vue 2.4.1＆amp; Vue Router 2.7.0

动态路线上的Vue.js 2.0过渡未触发

2 个答案: