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.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- angular2中router路由跳转navigate的使用与刷新页面问题详解
- Vue2.0路由篇之路由跳转的一个小问题
- Vue路由history模式踩坑记录:nginx配置解决404问题
- vue单页路由跳转后scrollTop问题
- 详解解决Vue相同路由参数不同不会刷新的问题
- Vue.js路由vue-router使用方法详解
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- VueJs路由跳转——vue-router的使用
- Vue问题记录
- 试着用React写项目-利用react-router解决跳转路由等问题(一)
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- MVC 路由 及 遇到问题记录
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- 试着用React写项目-利用react-router解决跳转路由等问题(四)
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- Vue.js路由组件vue-router使用方法详解
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- nginx 解决首页跳转问题详解