Vue路由跳转问题记录详解


Posted in Javascript onJune 15, 2017

最近项目上需要用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

Vue路由跳转问题记录详解 

Vue路由跳转问题记录详解    

当我想从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}}),页面不会跳转且地址也不会改变。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
JavaScript运行原理分析
Feb 09 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 #Javascript
package.json文件配置详解
Jun 15 #Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 #Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 #Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 #Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 #Javascript
详解vue跨组件通信的几种方法
Jun 15 #Javascript
You might like
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python两种注释用法的示例
2020/10/09 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
入党思想汇报
2014/01/05 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
旷课检讨书1000字
2014/02/14 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
创建文明学校实施方案
2014/03/11 职场文书
土地转让协议书
2014/04/15 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
档案管理员岗位职责
2015/02/12 职场文书
亲情作文之母爱
2019/09/25 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python