快速了解Vue-router实现原理

什么是前端路由？
在WEB前端单页面上，路由描述的是URL和UI之间的映射关系，这种映射是单向的，即URL变化引起UI更新

如何实现前端路由
前端路由的两个核心点：
1、如何改变URL页面不刷新
2、如何检测URL变化

一、我们来用hash来实现一下

hash是URL中带 # 及后面的部分，常用作描点在页面内进行导航，改变URL中的hash部分不影响页面的刷新
通过监听 hashchange 变化来进行改变URL

  <a href="#/">首页</a>
    <a href="#/about">about</a>
    <div class="routerView"></div>
<script>

	//路由路径
	const route = [
	{
		path:'/',
		content:'<div>首页</div>'
	},
	{
		path: '/about',
        content: '<div>about</div>'
	}
	]
	// 监听hashchange的改变
	window.addEventListener('hashchange',()=>{
		routerRender(location.hash) //获取到当前的路径 然后进行渲染
	})
		 routerRender('#/')
	
	function routerRender(url){
	var routerView = document.querySelector('.routerView')
	//循环设定的路径 判断路径和传过来的路径一样就进行渲染
	route.forEach((item)=>{
		if(url == ('#'+item.path)){
			routerView.innerHTML = item.content
		}
	})
}
</script>

二、使用history来实现

history提供了pushState和replaceState 两个方法，这两个方法改变URL不会引起页面的刷新

  <a href="/">首页</a>
    <a href="/about">about</a>
    <div class="routerView"></div>
<script>
   const route = [
       {
          path: '/',
          content: '<div>首页</div>'
       }, {
          path: '/about',
          content: '<div>about</div>'
       }
      ]
	// history是不带#号的 a标签会进行跳转 所以我们先阻止a标签的默认行为
	
	//当页面加载完毕的时候去监听a标签 把a标签的默认行为给取消掉
	window.addEventListener('DOMContentLoaded',()=>{
		let a = document.querySelectorAll('a')
		a.forEach((item)=>{
			item.addEventListener('click',(e)=>{
				 e.preventDefault() //阻止默认行为
				  history.pushState(null, "", item.getAttribute("href")) // 跳转
				  routerRender(item.getAttribute("href")) // 渲染
			})
		})
	})
	  history.pushState(null, "", '/')
      routerRender('/')
         // 监听history前进后退
      window.addEventListener('popstate', () => {
            console.log(location.pathname);
            routerRender(location.pathname)

       })
       // 渲染函数
        function routerRender(url) {
            var routerView = document.querySelector('.routerView')
            route.forEach((item) => {
                if (url == item.path) {
                    routerView.innerHTML = item.content
                }
            })
        }
</script>