路由分类
后端路由:value是function,用于处理客户端提交的请求 工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
前端路由:value是component,用于展示页面内容 工作过程:当浏览器的路径改变时,对应的组件就会显示,前端路由指的是hash地址与组件之间的对应关系
vue-router路由模式
hash模式和history模式,默认的是hash模式
哈希模式
简介: hash 模式是开发中默认的模式,它的 URL 带着一个#,例如:http://www.abc.com/#/vue,它的 hash 值就是#/vue。
特点:hash指的是地址中#号以及后面的字符,也称为散列值;hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端完全没有影响。所以改变hash值,不会重新加载页面;浏览器兼容好,是开发中默认的模式;hash变化对应的url都会被浏览器记录在历史访问栈中,可以使用浏览器的前进后退功能,虽然没有请求服务器,但页面内容和url一一对应;hash模式的工作原理是hashchange事件,window就可以监听hash的变化,而不需要向后端发起请求,并按规则加载相应的代码
历史模式
简介: history 模式的 URL 中没有#,它使用的是传统的路由分发模式,即用户在输入一个 URL 时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。
特点:书写简洁,没有#;主要使用了HTML5新增的pushState()和replaceState()这两个api结合window.popstate事件来实现的;pushState()可以改变url地址但不会发送请求;replaceState()可以读取历史记录