vue 的两种路由模式

第一种 hash 模式
后面带#号
http://xx.xxx.x.xxx:8080/#/index
切换路由，只改变#后面的值，就可以切换路由，不重新刷新页面，浏览器也会记录，左右箭头可以进行前进和后退操作。
会创建hashHistory对象，在访问不同的路由的时候,会发⽣两件事：
HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶
HasHistory.replace()替换到当前栈

第二种 history 模式
url 不带参数，http://xx.xxx.x.xxx:8080/index.html
切换以后会刷新页面，http://xx.xxx.x.xxx:8080/home.html,浏览器也可以进行前进后退操作
可以使用history的方法进行前进后退
history.forward()：在历史记录中前进一步
history.back()：在历史记录中后退一步
history.go(n)：在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。

H5新增
history.pushState(data[,title][,url])：向历史记录中追加一条记录
history.replaceState(data[,title][,url])：替换当前页在历史记录中的信息
history.state：是一个属性，可以得到当前页的state信息。
window.onpopstate：是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数

vue 的两种路由模式相关推荐

vue的两种路由模式原理
参考:https://juejin.cn/post/7127143415879303204 react中路由模式分为hash路由和history路由.hash路由的原理是window.onhashch ...
webpack 安装vue（两种代码模式compiler 和runtime）
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
Vue-Router的两种路由模式
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. ...
Vue的三种路由模式
路由模式解析这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置.如果有进行过服务器开发或者对http协议有所了解就会知道 ...
vue中两种路由跳转拼接参数
this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...
微前端：qiankun的两种运作模式
背景微前端 qiankun 有两种运作模式: 1.使用 registerMicroApps + start,这是挂自动档,路由改变,重新load子应用. 2.使用 loadMicroApp,每次路由 ...
8086的两种工作模式_Buck变换器工作原理
一.Buck变换器另外三种叫法 1.降压变换器:输出电压小于输入电压. 2.串联开关稳压电源:单刀双掷开关(晶体管)串联于输入与输出之间. 3.三端开关型降压稳压电源: 1)输入与输出的一根线是公用的 ...
calico的两种网络模式BGP和IP-IP性能分析
目前使用较多的网络插件有 flannel,calico,canel等,但是如果对比以上几种网络插件的性能,还是calico最受欢迎一.calico概述二.性能评测指标三.物理机性能评测四.物理 ...

vue 的两种路由模式

vue 的两种路由模式相关推荐

最新文章

热门文章