总结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}}),页面不会跳转且地址也不会改变。
以上就是总结Vue路由跳转问题的实例教程的详细内容,更多请关注其它相关文章!