vue路由之路由的两种模式

专栏目录请点击

简介

1. 一般路由分两种形式
   1. 一种是哈希路由，最明显的特征就是路由中有一个#
   2. 还有一种就是history路由，路由中不带#

hash路由

1. hash值:比如 'http://www.baidu.com/#/abc' hash 的值为 '#/abc'
2. hash值虽然出现在在url中，但是并不会包含在http请求中，因此hash值改变，并不会重新加载页面
3. 但是hash值的改变会触发onhashchange 事件，我们可以通过监听然后渲染自己要渲染的组件

history模式

1. 他是通过H5新增的api： pushState() 和replaceState() 应用于浏览器的历史记录
2. 当他执行修改的时候，虽然改变了url，但是不会向后端发送请求
3. 我们可以通过onpopstate 事件，来监听history的变化，然后渲染自己需要渲染的组件，达到路由的效果

两种模式的比较

在大部分情况下，两者都是差不多的，但是hash模式主要有一下的优势

1. 使用 pushState()来设置url，可以是当前url同源的任意url，而hash只能修改#后的内容，所以值可以设置与当前同源的url
2. 如果pushState()设置的url与当前的url一模一样，那么记录同样会会添加到栈中，而hash值，设置新值的时候才会添加到记录栈中
3. pushState()通参数可以添加任意的数据记录，而hash智能添加短字符串
4. pushState可以额外设置title属性供使用 点击

history存在的问题

history存在的问题，一般就会出现在路由路径上

• 如果前端，因为history的路径与请求后端的接口路径没有差别，当我们进行刷新的时候他会直接将路径传到后端
• 但是后端没有相应的路由处理，就会返回404的错误

对于这种情况官方推荐的是一个覆盖所有情况的候选资源

1. 如果url匹配不到任何的资源，那么就应该返回同一个index.html页面
2. 这样服务器端就不会返回404的错误页面，对于所有的路径都返回index.html文件