Vue路由跳转问题记录详解
最近项目上需要用Vue用来做app，在Vue中使用路由时遇到下面的问题。
路由设置如下：
{
path:'/tab',
component:Tab,
children:[{
path:'layoutList',
name:'LayoutList',
component:LayoutList
},{
path:'layoutView/:layoutId',
name:'LayoutView',
component:LayoutView
},{
path:'layoutDetail/:viewId',
name:'LayoutDetail',
component:LayoutDetail
}]
}
其中/tab是根地址，有3个子地址，3个子地址层级为：LayoutList => LayoutView => LayoutDetail
正常情况：假设当前路由为/tab/layoutList，需要跳转到LayoutView页面，可以通过router.push({path:'layoutView/'+item.id})
跳转后的路由为/tab/layoutView/1
当我想从LayoutView页面跳转到对应的LayoutDetail页面时：
情况一：（找不到页面）
跳转前地址：/tab/layoutView/1
跳转代码：router.push({path:'layoutDetail/'+item.id});
跳转后地址：/tab/layoutView/layoutDetail/27
情况二：（找不到页面）
跳转前地址：/tab/layoutView/1
跳转代码：router.push({path:'/layoutDetail/'+item.id});
跳转后地址：/layoutDetail/27
情况三：（找不到页面）
跳转前地址：/tab/layoutView/1
跳转代码：router.push({path:'tab/layoutDetail/'+item.id});
跳转后地址：/tab/layoutView/tab/layoutDetail/27
情况四：（页面正常显示）
跳转前地址：/tab/layoutView/1
跳转代码：router.push({path:'/tab/layoutDetail/'+item.id});
跳转后地址：/tab/layoutDetail/27
只有按照情况四的操作，才能正常显示出来页面。
vue路由会根据push的地址，如果地址不是/开头，会直接替换当前路由的最后一个/后的地址，
如果地址是/开头，会以push的地址作为绝对地址进行跳转。
另外我尝试还使用router.go({name:'LayoutDetail',params:{viewId:item.id}})，页面不会跳转且地址也不会改变。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详
defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏，他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉，这篇文章主要介绍了vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解,需要的朋友可以参考下2023-01-01
本文通过实例代码给大家介绍了vue实现底部菜单功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这篇文章主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料，对大家学习或者使用vue2.0具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧。2017-05-05
今天小编就为大家分享一篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入，共享数据以及许多其他创造性方式。在本文中，会介绍基础知识，并提供一些用于处理事件的代码示例。需要的小伙伴可以参考下面文章的具体内容2021-09-09
Vue 中 filter 与 computed 的区别与用法解析
这篇文章主要介绍了Vue 中 filter 与 computed 的区别与用法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)
关于vue登录注册,并保持登录状态,是vue玩家必经之路,这篇文章主要给大家介绍了关于Vue项目如何保持用户登录状态的相关资料,localStorage+vuex刷新页面后状态依然保持,需要的朋友可以参考下2022-05-05
解决antd的Form组件setFieldsValue的警告问题
这篇文章主要介绍了解决antd的Form组件setFieldsValue的警告问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本篇随笔以权限管理模块中的用户管理为媒介，进行相关功能的介绍和界面设计的处理。2021-05-05
在我们开发项目中,特别是流程审批类的项目,最后一步会提交审核,审核员看完相应信息以后,没问题就会签字通过审批,这篇文章主要给大家介绍了关于VUE签字组件vue-esign安装使用的相关资料,需要的朋友可以参考下2023-09-09
最新评论