vue-router是什么

Posted 2021-03-01 annie211

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。（传统页面切换是用超链接a标签进行切换）

##### 路由的两种模式

前端路由核心：改变视图的时候不会向后端发起请求。（vue-router中默认hash模式）

##### 1.hash模式：

哈希存在url中，但是发送请求的时候并不会被带上，通过监听`hashchange`事件得到hash值的变化，来实现更新页面部分内容的操作。

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener(‘hashchange‘, matchAndUpdate)

2.history模式：

html5 history接口：pushState() 和 replaceState()，向历史记录中添加或替换而无须重新加载页面。

function matchAndUpdate () {
   // todo 匹配路径 做 dom 更新操作
}

window.addEventListener(‘popstate‘, matchAndUpdate)

3、history模式刷新404问题：

用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。

但因为没有 # 号，当用户刷新页面时，浏览器还是会给服务器发送请求。

解决方法：需要服务器的支持，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，那么刷新会跳首页。