vue-router 路由模式有哪些,实现方式及原理
时间: 2023-08-08 14:02:18 浏览: 88
vue-router的路由模式有三种:哈希模式(hash mode)、历史模式(history mode)和抽象模式(abstract mode)。
1. 哈希模式:默认使用的路由模式,通过改变URL中的hash值来进行路由的切换。例如:http://example.com/#/home。
实现方式:通过监听URL中hash值变化的事件,当hash值改变时,动态渲染相应的组件内容。
原理:浏览器会将hash值的变化当作页面的锚点变化来处理,不会重新发送请求,而是通过监听hashchange事件来更新URL对应的视图。
2. 历史模式:通过修改URL的路径来进行路由的切换,去除URL中的hash值。例如:http://example.com/home。
实现方式:通过HTML5的history API(pushState和replaceState方法)来修改URL路径并将路由信息保存在浏览器的history栈中。同时需要配合服务器端的配置,将所有的URL请求都指向根页面。
原理:history API可以修改URL路径并保持在浏览器的历史记录中,当URL发生改变时,浏览器会发送请求到服务器,服务器通过配置将所有的URL请求都指向根页面,然后由vue-router解析路由信息并呈现对应的视图。
3. 抽象模式:不依赖于浏览器的URL,可以将路由信息保存在任意位置,并通过切换路由信息来改变页面内容。
实现方式:通过自定义路由器(Router)和路由(Route)对象来管理路由状态,并通过编程方式来切换路由信息。
原理:抽象模式不依赖于浏览器的URL,可以将路由信息保存在任意位置,例如内存或者状态管理库中。通过切换路由信息,可以触发相应的组件渲染。