Vue路由跳转问题记录

Posted 2020-09-10 梁少豪

最近项目上需要用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}})，页面不会跳转且地址也不会改变。

如果文章有错误的地方或者有更好的方法，欢迎各位指出，谢谢！