vue-Router实现原理

前端路由概念

路由就是用来解析URL以及调用对应的控制器，在不重新请求页面的情况下，更新页面的视图

vue-Router两种模式

Hash — 默认值，浏览器#以#后的字符称为hash
history-- 利用URL中的路径（/home）

hash与history的切换
在router的index.js文件中，有一个new Router(),里面的mode默认为hash模式，可以在这里更改为history模式

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

hash模式

特点

1. hash不会被包含在http请求中，因此，改变hash不会重新加载页面
2. hashchange 用来监听hash改变的事件
3. 每一次改变，都会在浏览器中添加一个历史记录

方法
HashHistory.push 跳转路由，添加历史记录栈
HashHistory.replace() 跳转路由，直接替换当前页面，不会添加历史

history

特点

1. history模式的URL要与后端的URL一样，后端如果没有对应路由，则会返回404错误
2. popState（window.onpopstate）用来监听history改变的事件

方法
history.pushState() 跳转路由，添加历史记录栈

history.replaceState() 跳转路由，直接替换当前页面，不会添加历史

两种方式比较

1. pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL

2. pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串

3. pushState可额外设置title属性供后续使用

4. history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误