vueRouter原理

前端路由分为两种模式，分别是hash模式和history模式
hash模式原理实现是通过监听hashchange的改变进行无刷新渲染
history原理通过调用history.pushState（无刷新插入历史状态，更新url）更新url，并且监听popstate回退键事件进行渲染

1-hash模式

	<-- router-link -->
    <a href="#/">首页</a>
    <a href="#/about">关于</a>
    
    <-- router-view -->
    <div id="view"></div>
    <script>
		//1.监听hash值的变化，hash改变，div内容改变
		window.addEventListener('hashchange',()=>{
			view.innerHTML = location.hash.slice(1)
		})	
		//2、一开始页面当加载完dom时，DOMContentLoaded对dom进行渲染	
		document.addEventListener('DOMContentLoaded',()=>{
			view.innerHTML = location.hash.slice(1)
})							

// 注意：当元素不是a时，通过onclick(路径名)方法进行操作	{location.hash=路径名}						
	</script>

2-history模式

	<!-- router-link -->
    <span onclick="changerouter('/')">首页</span>
    <span onclick="changerouter('/about')">关于</span>
    
    <!-- router-view -->
    <div id="view"></div>

<script>
	// 1、history.pushState无刷新插入历史状态，更改url
	function changerouter(pathname){
		history.pushState(null,null,pathname)
}
	//2、监听回退键popstate，渲染
	window.addEventListener("popstate",()=>{
		view.innerHTML = location.pathname
})
</script>

history和hash的区别

1-hash模式以#开头，浏览器可以进行前进和后退，并且不刷新，不和服务端交流
2-无#，和服务端同事交流