Vue路由跳转问题记录详解
2019/6/27 20:54:31
本文主要是介绍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路由跳转问题记录详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist