我发现过渡不会在具有参数的动态路线上发射。 例如下面的代码，当我在/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"> &t;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的引用
使用params使用路由时需要注意的一点是，当用户从/ user / foo导航到/ user / bar时，将重用相同的组件实例。 由于两个路由都呈现相同的组件，因此这比破坏旧实例并创建新实例更高效。 但是，这也意味着组件的生命周期钩子将不会被调用。
要对同一个组件中的参数变化做出反应，您可以简单地观看$ route对象
我应该发布一个问题吗？
谢谢你的帮助 ！
I found that transition is not firing on dynamic route with parameters. For exemple with the code below, when I am in /chapter/1 and I go to /chapter/2 there is no transition. But when I am in /chapter/1 and I go to /profile/1 there is one !
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
<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>Maybe is due to the fact that vue-router doesn't destroy the parent component ? I didn't found a way to run the transition from the code. I tried this configuration on vue-router example pack and the behavior is the same.
quote from the 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
Should I post an issue ?
Thanks for your help !
最满意答案
你可以检查这个工作示例： 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。 但是直到有人给你一个更好的解决方案，你可以使用这种方法来获得动态路由的转换。
关于在vue-router github页面上发布这个问题，我不确定这是否有资格被解决/修正，但是您可能一定会提醒他们注意。 修复可能涉及不重用组件，这也不理想。 所以这对他们来说是一个艰难的要求。 但讨论肯定会很有趣！ 如果您决定创建一个，请在此处发布问题链接:-)
Can you check this working example: https://jsfiddle.net/mani04/dLnz4rbL/
I attempted to use the method described under Transitioning Between Elements in the docs.
In my fiddle example, which mostly uses the code from your question description, I used a transition wrapper within component, as shown below:
<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>
The document specifies that we need to provide a key to make them distinct elements for Vue.js. So I added your chapter ID as key.
I don't know if this is a hack or a proper solution, I moved from Angular2 to Vue only 2 weeks ago. But till someone gives you a better solution, you may use this method to get your transitions for dynamic routes.
Regarding posting this as an issue in github page of vue-router, I am not sure if this qualifies to be addressed / fixed, but you may definitely bring it to their notice. Fix may involve not reusing components, which is also not ideal. So it is a tough call for them. But the discussion should definitely be interesting! Please post back the issue link here if you decide to create one :-)
动态路由上的Vue.js 2.0过渡不会触发(Vue.js 2.0 transition on dynamic route not firing)
我发现过渡不会在具有参数的动态路线上发射。 例如下面的代码，当我在/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">
&t;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的引用
使用params使用路由时需要注意的一点是，当用户从/ user / foo导航到/ user / bar时，将重用相同的组件实例。 由于两个路由都呈现相同的组件，因此这比破坏旧实例并创建新实例更高效。 但是，这也意味着组件的生命周期钩子将不会被调用。
要对同一个组件中的参数变化做出反应，您可以简单地观看$ route对象
我应该发布一个问题吗？
谢谢你的帮助 ！
I found that transition is not firing on dynamic route with parameters. For exemple with the code below, when I am in /chapter/1 and I go to /chapter/2 there is no transition. But when I am in /chapter/1 and I go to /profile/1 there is one !
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
<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>
Maybe is due to the fact that vue-router doesn't destroy the parent component ? I didn't found a way to run the transition from the code. I tried this configuration on vue-router example pack and the behavior is the same.
quote from the 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
Should I post an issue ?
Thanks for your help !
最满意答案
你可以检查这个工作示例： 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。 但是直到有人给你一个更好的解决方案，你可以使用这种方法来获得动态路由的转换。
关于在vue-router github页面上发布这个问题，我不确定这是否有资格被解决/修正，但是您可能一定会提醒他们注意。 修复可能涉及不重用组件，这也不理想。 所以这对他们来说是一个艰难的要求。 但讨论肯定会很有趣！ 如果您决定创建一个，请在此处发布问题链接:-)
Can you check this working example: https://jsfiddle.net/mani04/dLnz4rbL/
I attempted to use the method described under Transitioning Between Elements in the docs.
In my fiddle example, which mostly uses the code from your question description, I used a transition wrapper within component, as shown below:
<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>
The document specifies that we need to provide a key to make them distinct elements for Vue.js. So I added your chapter ID as key.
I don't know if this is a hack or a proper solution, I moved from Angular2 to Vue only 2 weeks ago. But till someone gives you a better solution, you may use this method to get your transitions for dynamic routes.
Regarding posting this as an issue in github page of vue-router, I am not sure if this qualifies to be addressed / fixed, but you may definitely bring it to their notice. Fix may involve not reusing components, which is also not ideal. So it is a tough call for them. But the discussion should definitely be interesting! Please post back the issue link here if you decide to create one :-)
发布评论