首先，我已经检查并打开了历史模式，我像这样调用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?',
},
],
},
];任何想法，我已经调整了代码，以消除识别代码，所以道歉，如果它看起来有点奇怪。
2条答案
按热度按时间oyxsuwqo1#
只有
itemId路由参数在变化，这种情况下，由于转换前后使用的路由组件相同，vue-router会重用已有的路由组件;它们不会被销毁和重新创建。因此，如果你在组件created或mounted钩子中加载数据，那么在路由更改后，它们不会被再次调用。相反，你需要使用beforeRouteUpdate或监视$route的更改。如果你想强制销毁并重新创建组件（不推荐），那么你需要在路由上
key<router-view>：阅读Data Fetching指南以了解更多信息。
js5cn81o2#
该解决方案：https://stackoverflow.com/a/69638787/1330193并不是在所有情况下都能很好地工作，因为它会重新绘制完整的组件树，并重建所有组件的上下文。这意味着，每次更改
:view参数时，您都会为:itemId的项目发出额外的API请求。例如，如果要保存父路由的范围（在您的情况下：
/page/item/:itemId），并且只能重绘子路由（在您的情况下：/page/item/:itemId/:view?），您可以使用以下解决方案：1.指定要在路由配置中监视哪个参数：
1.将其放入布局组件中：
因此，只有当
itemId参数改变时，router才会重新呈现路由的组件。无论如何，这比监视组件的props更声明性。在我看来，这是一种常见的行为，应该以更原生的方式在vue-router库中实现。