Vue路由跳转问题记录详解

前端之家收集整理的这篇文章主要介绍了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}}),页面不会跳转且地址也不会改变。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/38600.html

猜你在找的Vue相关文章