vue的路由模式：hash和history。

最近有个问题，其实很常见就是hash模式跳转404。

发生问题的场景：

1.项目加载的动态路由。

2.首页和登录页在一个动态路由模块，而其他的管理层页面模块在另外一个动态路由模块。按需加载（就是根据传递的关键字动态加载不同的路由模块）。

3.问题的产生：登录后跳转home首页正常，点击跳转管理层页面（新打开浏览器窗口）。这时管理层页面编写<a></a>标签：<a href="/#/home">，跳转首页为404。

分析原因：

1.没有动态加载到home的动态路由，找不到路由，因此跳转404。

2.hash模式下页面不刷新，因此不会重新加载动态路由。

解决方案：

a标签href的跳转换成@click，跳转后强制刷新当前页面。

衍生问题：在点击浏览器自带的回退上一步的按钮时候又跳转到404了。

原因：hash模式跳转后会记录上次浏览器的访问记录。因此是404。

衍生问题的解决方案：

1.在需要监听处理回退上一步的页面定义返回方法：例：goBack(){};

2.在需要处理自定义返回的页面中添加监听事件 

onBeforeMount(() => {if (window.history && window.history.pushState) {// 向历史记录中插入返回上一步的页面history.pushState(null, null, location.href)window.addEventListener('popstate', goBack)}
})

3.使用后离开页面销毁：

onBeforeUnmount(() => {window.removeEventListener('popstate', goBack)
})

部分引博客Vue监听并自定义浏览器返回事件方案_vue改变浏览器的回退事件-CSDN博客