最近项目上需要用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实现路由跳转和嵌套  # vue路由拦截及页面跳转的设置方法  # 详解vue 路由跳转四种方式 (带参数)  # vue路由跳转传参数的方法  # vue如何实现路由跳转到外部链接界面  # Vue实现路由跳转的3种方式超详细分解  # 跳转  # 找不到  # 跳转到  # 正常显示  # 我想  # 可以通过  # 会以  # 需要用  # 大家多多  # component  # Tab  # layoutView  # LayoutList  # children 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何快速搭建二级域名独立网站？  Laravel如何保护应用免受CSRF攻击？（原理和示例）  JavaScript如何实现继承_有哪些常用方法  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  Linux系统命令中screen命令详解  如何用JavaScript实现文本编辑器_光标和选区怎么处理  javascript中的try catch异常捕获机制用法分析  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  高性价比服务器租赁——企业级配置与24小时运维服务  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  长沙企业网站制作哪家好,长沙水业集团官方网站？  如何解决hover在ie6中的兼容性问题  Laravel如何使用Telescope进行调试？（安装和使用教程）  android nfc常用标签读取总结  jQuery validate插件功能与用法详解  微信推文制作网站有哪些,怎么做微信推文，急？  Laravel如何使用Collections进行数据处理？（实用方法示例）  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  北京网站制作公司哪家好一点,北京租房网站有哪些？  个人网站制作流程图片大全,个人网站如何注销？  如何在建站之星绑定自定义域名？  如何在万网ECS上快速搭建专属网站？  如何在云指建站中生成FTP站点？  Laravel中的withCount方法怎么高效统计关联模型数量  PythonWeb开发入门教程_Flask快速构建Web应用  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  如何在宝塔面板中修改默认建站目录？  如何获取PHP WAP自助建站系统源码？  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  使用C语言编写圣诞表白程序  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  javascript基本数据类型及类型检测常用方法小结  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  nginx修改上传文件大小限制的方法  如何快速搭建高效香港服务器网站？  北京网站制作的公司有哪些,北京白云观官方网站？  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】  如何快速搭建FTP站点实现文件共享？  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  如何在阿里云高效完成企业建站全流程？  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程