Vue中hash和history两种路由模式的区别

前言：我遇到的两个问题

• 第一：在企业微信授权，重定向后的链接中有code值，前端需要将code获取到，传递给后端拿到用户信息及凭证token令牌，最开始我的项目路由使用~history模式，就单纯觉得浏览器地址没有#号，看起来好看，仅仅如此！后面开发过程中发现，页面刷新404，最终测试出问题，就是路由模式问题，就将那串代码注释了，回到默认的hash模式。

• 第二：修改路由模式后，前端微信授权获取code为underfunded！相关代码并未修改，难道默认的hash方式不支持 this.$route.query.code方式获取code ？ 后面测试果然如此！最终使用split()函数截取拿到code值！

Hash模式

• 属于Vue路由的默认模式。
• 访问的路径中包含#号，#后面就是对应页面的路由名称。
• 支持页面刷新。
• 获取当前页面路由某个参数值，使用js中split()进行截取获取。

History模式

• 另一种vue路由模式，路径中没有#号，访问路径看起来像api请求一样。
• 需要将前端对应路由，配置到后端数据库，否则直接配置history模式，页面无法刷新（404）
• 获取当前页面路由某个参数值，使用this.$route.query.参数（通过键-获取值）~获取当前路径某个参数值；

Vue文档对路由模式~阐述

请点击~跳转…

2021-10-26更新：

1.vue路由中的一级路由（普通路由）、二级路由（嵌套路由）:

一级路由：

二级路由：嵌套路由，一般用于组件在页面上有层级关系

一级路由和二级路由写法：
注意：二级路由（嵌套路由）的父组件上需要路由占位符：