Vue-router正在修改url，但没有重新渲染组件

Question

首先，我已经检查并打开了历史模式，我调用vue-router如下:

const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: routes,
});

我当前的路由是/page/item/8，我要重定向到/page/item/9。目前，url改变了，但页面没有重新渲染，让我在相同的视图我之前。

这个重定向是这样做的:

this.$router.push({ name: 'PageItem', params: { itemId: '9' }}).catch(err => {
// Stop Vue.router throwing an error if a user clicks on a notification with the same route.
if (err.name !== 'NavigationDuplicated') {
this.$logger.debug.log(err);
}
});

所讨论的路由如下:

import PageWrapper from '@/layouts/PageWrapper';

export default [
{
path: '/page',
name: 'page',
component: PageWrapper,
children: [
... Other Routes ...
{
component: () => import(/* webpackChunkName: "page-item" */'@/pages/PageItem'),
name:      'PageItem',
path:      '/item/:itemId/:view?',
},
],
},
];

有任何想法，我已经调整了代码以删除识别代码，所以如果它看起来有点奇怪，请道歉。

Answer 1

只改变itemId路由参数。在这种情况下，由于在转换前后使用了相同的路由组件，vue-router将重用现有的路由组件;它们不会被破坏和重新创造。因此，如果你在组件created或mounted钩子中加载数据，那么在路由更改后，它们将不会再次被调用。相反，您需要使用beforeRouteUpdate或查看$route以查看更改。

如果你想强制组件被销毁并重新创建(不推荐)，那么你需要在路由上key<router-view>:

<router-view :key="$route.fullPath">

阅读Data抓取指南获取更多信息。

Answer 2

此解决方案:https://stackoverflow.com/a/69638787/1330193并非在所有情况下都能很好地工作，因为它将重新绘制完整的组件树，并重建所有组件上下文。这意味着，每次当你改变:view参数时，你将为:itemId项做一个额外的API请求。

例如，如果你想保存父路由的作用域(在你的情况下:/page/item/:itemId)，只有子路由应该被重绘(在你的情况下:/page/item/:itemId/:view?)，你可以使用这个解决方案:

1. 指定你想在路由配置中观察的参数:

import PageWrapper from '@/layouts/PageWrapper';

export default [
{
path: '/page',
name: 'page',
component: PageWrapper,
children: [
... Other Routes ...
{
component: () => import(/* webpackChunkName: "page-item" */'@/pages/PageItem'),
name:      'PageItem',
path:      '/item/:itemId/:view?',
meta: {
watchParam: 'itemId' //
}
},
],
},
];

2. 把它放到你的布局组件中:

<router-view :key="$route.params[$route.meta.watchParam]">

因此，只有当itemId参数改变时，路由器才会重新渲染路由的组件。

无论如何，这是一种比观察组件的props更具声明性的方式。在我看来，这是一种常见的行为，应该在vue-router库中以更原生的方式实现。