路由的概念,前端路由的实现和vueRouter的使用（上）

1、路由的概念

路由的本质就是一种对应关系（此处的路由含义同之前nodejs的路由），根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为：后端路由和前端路由

• 后端路由：由服务器端进行实现并实现资源映射分发（nodejs、jsp、php等）

  • 概念：根据不同的用户URL请求，返回不同的内容（地址与资源产生对应关系）

  • 本质：URL请求地址与服务器资源之间的对应关系（映射）

 

• 前端路由：根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系

  • 概念：根据不同的用户事件，显示不同的页面内容（地址与事件产生对应关系）

  • 本质：用户事件与事件处理函数之间的对应关系

 记住一句话：有请求就应该有响应，只不过区别在于，之前node是响应资源，现在在前端中通过事件来进行响应。

2、前端路由实现

 

面试题：请你说出前端路由是怎么实现的？或者有哪几种实现方式？

答：前端路由模式有两种实现方式：hash方式、history方式。

 核心思想：通过监听地址栏的变化事件来实现资源的动态显示

前端路由有2种模式：

• hash模式

• hash路由模式是这样的：http://xxx.abc.com/#/xx。 有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。

  window.addEventListener('hashchange', ()=>{  // 通过 location.hash 获取到最新的 hash 值  console.log(location.hash); })

• 形如：http://xxx.abc.com/xx/yy/zz。HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。
   

 history.pushState({},title,url); // 向历史记录中追加一条记录
history.replaceState({},title,url); // 替换当前页在历史记录中的信息。
window.addEventListener('popstate', function(event) {
    console.log(event)
})

注：浏览器地址没有#， 比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。但它在服务器没有配置的情况下，不能手动刷新，否则返回404页面