最近项目上需要用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}})，页面不会跳转且地址也不会改变。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- VueJs路由跳转——vue-router的使用详解
- Vue实现路由跳转和嵌套
- vue路由跳转时判断用户是否登录功能的实现
- Vue-router路由判断页面未登录跳转到登录页面的实例
- vue2.0项目实现路由跳转的方法详解
- vue路由拦截及页面跳转的设置方法
- vue2+el-menu实现路由跳转及当前项的设置方法实例
- 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
- Vue利用路由钩子token过期后跳转到登录页的实例
- Vue.js中该如何自己维护路由跳转记录
