源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Vue路由跳转问题记录详解

  • 时间:2020-07-16 19:04 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要: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 [img]http://files.jb51.net/file_images/article/201706/2017061511331313.png[/img]   [img]http://files.jb51.net/file_images/article/201706/2017061511331414.png[/img]      当我想从LayoutView页面跳转到对应的LayoutDetail页面时: [b]情况一:(找不到页面)[/b] 跳转前地址:/tab/layoutView/1 跳转代码:router.push({path:'layoutDetail/'+item.id}); 跳转后地址:/tab/layoutView/layoutDetail/27 [b]情况二:(找不到页面)[/b] 跳转前地址:/tab/layoutView/1 跳转代码:router.push({path:'/layoutDetail/'+item.id}); 跳转后地址:/layoutDetail/27 [b]情况三:(找不到页面)[/b] 跳转前地址:/tab/layoutView/1 跳转代码:router.push({path:'tab/layoutDetail/'+item.id}); 跳转后地址:/tab/layoutView/tab/layoutDetail/27 [b]情况四:(页面正常显示)[/b] 跳转前地址:/tab/layoutView/1 跳转代码:router.push({path:'/tab/layoutDetail/'+item.id}); 跳转后地址:/tab/layoutDetail/27 只有按照情况四的操作,才能正常显示出来页面。 vue路由会根据push的地址,如果地址不是/开头,会直接替换当前路由的最后一个/后的地址, 如果地址是/开头,会以push的地址作为绝对地址进行跳转。 另外我尝试还使用router.go({name:'LayoutDetail',params:{viewId:item.id}}),页面不会跳转且地址也不会改变。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部