vue-router 注意事项

Posted 2021-01-07 stonespawn

1、vue-router 两种模式

（1）mode：hash，hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件。vue默认为hash模式

window.onhashchange = function(event){
 
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
｝

（2）mode：history

const router = new VueRouter({    
    mode:"history",
    routes:[]
})

不怕前进，不怕后退，就怕刷新F5，如果后端没有准备的话，刷新是实实在在地去请求服务器的。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题，但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会刷出一个404来。