Vue路由跳转问题记录详解

Vue路由跳转详解：长沙网络推广的经验分享

======================

在最近的项目中，我们采用了Vue框架来开发app，而在使用Vue路由时，遇到了一些关于路由跳转的问题。接下来，我将详细介绍这些路由跳转问题，并分享长沙网络推广的经验。希望这篇文章能为大家提供一个参考，帮助大家更好地理解和使用Vue路由。

一、路由设置

我们先来看一下我们的路由设置。我们有一个根地址/tab，它有三个子地址：LayoutList、LayoutView和LayoutDetail。这三个子地址的层级关系为：LayoutList => LayoutView => LayoutDetail。

在Vue的路由配置中，我们的设置如下：

```javascript

{

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/layoutList，我们需要跳转到LayoutView页面。这种情况下的跳转代码为：`router.push({path:'layoutView/'+item.id})`，跳转后的路由为/tab/layoutView/1。这部分的跳转是正常的。

当从LayoutView页面跳转到对应的LayoutDetail页面时，我们遇到了问题。我们尝试了以下几种情况：

1. 路径为`/tab/layoutView/1`时，使用`router.push({path:'layoutDetail/'+item.id});`，跳转后的地址变成了`/tab/layoutView/layoutDetail/27`，页面找不到。

2. 使用`router.push({path:'/layoutDetail/'+item.id});`，跳转后的地址变成了`/layoutDetail/27`，页面也找不到。

3. 使用`router.push({path:'tab/layoutDetail/'+item.id});`，跳转后的地址变成了`/tab/layoutView/tab/layoutDetail/27`，页面依然找不到。

只有情况四，即使用`router.push({path:'/tab/layoutDetail/'+item.id});`，才能正常显示页面。这个问题的原因是Vue路由会根据push的地址来决定是替换当前路由的一个/后的地址，还是以绝对地址进行跳转。如果地址不是以/开头，Vue会将其视为相对路径，替换当前路由的一个/后的地址；如果地址是以/开头，Vue会将其视为绝对路径进行跳转。尝试使用`router.go({name:'LayoutDetail',params:{viewId:item.id}})`时，页面不会跳转且地址也不会改变。

-

以上就是关于Vue路由跳转问题的全部内容。希望这篇文章能帮助大家更好地理解和使用Vue路由。也希望大家能多多支持长沙网络推广。感谢大家的阅读！