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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
javascript 禁止复制网页
Jun 11 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
vue之数据交互实例代码
Jun 20 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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读取目录下所有文件的代码
2008/01/07 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
js编写简易的计算器
2020/07/29 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python中altair可视化库实例用法
2021/01/26 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
违反学校规定检讨书
2014/01/18 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
考试诚信承诺书
2014/05/23 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
六五普法宣传标语
2014/10/06 职场文书
2014教师年度工作总结
2014/11/10 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python