vue 中怎么监听路由的变化
1、在一个组件里面mounted(){// 判断浏览器是否支持historyif (window.history && window.history.pushState) {console.log(document.URL)history.pushState(null, nul...
·
1、在一个组件里面
mounted(){
// 判断浏览器是否支持history
if (window.history && window.history.pushState) {
console.log(document.URL)
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
methods:{
goBack(){
console.log("路由变化了")
this.$router.replace({path: '/home'});
//replace替换原路由,作用是避免回退死循环
}
},
vue-router
路由原理
在解析源码前,先来了解下前端路由的实现原理。 前端路由实现起来其实很简单,本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新。目前单页面使用的路由就只有两种实现方式: hash 模式 history 模式
1.
www.test.com/#/ 就是 Hash URL,当 # 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面。
History 模式是 HTML5 新推出的功能,比之 Hash URL 更加美观
在实例化 VueRouter 的过程中,核心是创建一个路由匹配对象,并且根据 mode 来采取不同的路由方式。
更多推荐
已为社区贡献2条内容
所有评论(0)