码迷,mamicode.com
首页 > 其他好文 > 详细

vue-router是什么

时间:2020-04-09 12:40:14      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:lock   change   需要   基于   监听   history   a标签   func   list   

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

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 页面,那么刷新会跳首页。

 

vue-router是什么

标签:lock   change   需要   基于   监听   history   a标签   func   list   

原文地址:https://www.cnblogs.com/annie211/p/12665938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!