vue3路由跳转页面不跳
时间: 2023-08-20 08:15:04 浏览: 226
Vue路由切换页面不更新问题解决方案
5星 · 资源好评率100%
回答: 为了解决Vue3路由跳转页面不跳的问题,可以尝试以下解决方案。首先,在大页面(Layout组件)的路由容器上加一个key属性,可以使用路由路径加上一个随机数作为key值。例如:`<router-view :key="key"></router-view>`,并在computed属性中定义key方法,返回`this.$route.path + Math.random()`。这样可以确保每次路由跳转时都会重新渲染页面。\[1\]
另外,可以在App组件中添加一个路由出口,将其作为跳转页面的目标。可以在App组件中使用render函数,返回一个`<router-view>`组件。这样在点击时会跳转到这个出口页面,展示注册页面。\[2\]
最后,如果是在三级路由中出现页面不跳转的问题,可以在三级路由的根元素中添加样式,例如设置一个绝对定位的div元素,并设置宽度、高度和背景颜色等样式。这样可以确保页面内容正常显示。例如:`<div style="position:absolute;background: white; width:calc(86%);height: calc(96%);z-index: 999;">我是商品详情</div>`。\[3\]
通过以上解决方案,可以解决Vue3路由跳转页面不跳的问题。
#### 引用[.reference_title]
- *1* *3* [Vue 面包屑三级路径改变但页面不跳转解决方案](https://blog.csdn.net/m0_46183499/article/details/128313204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue2路由跳转,页面不跳的问题](https://blog.csdn.net/Daisy_ls/article/details/125814769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文