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.js # 路由跳转 # vue # Vue实现路由跳转和嵌套 # vue路由拦截及页面跳转的设置方法 # 详解vue 路由跳转四种方式 (带参数) # vue路由跳转传参数的方法 # vue如何实现路由跳转到外部链接界面 # Vue实现路由跳转的3种方式超详细分解 # 跳转 # 找不到 # 跳转到 # 正常显示 # 我想 # 可以通过 # 会以 # 需要用 # 大家多多 # component # Tab # layoutView # LayoutList # children

返回目录在线咨询

上一篇：PySpark中从现有列右侧提取可变长度字符创建新列的教程
下一篇：Python Sounddevice 音频卡顿问题解析与队列数据安全处理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Vue路由跳转问题记录详解

您的项目需求