解析vue-router到html5的pushState replaceState是如何实现页面不刷新而时时刷新数据的

Vue-router 利用 HTML5 History API 中的 pushState 和 replaceState 方法来实现无需重新加载页面的页面跳转。

具体来说，当你使用 Vue-router 的时候，它会根据你的路由配置生成对应的路径。如果你设置了 mode: 'history'，Vue-router 会使用 history.pushState 和 history.replaceState 方法来管理路由，这样就可以实现路由的变化而不刷新页面。

以下是一个简单的例子：

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];
 
const router = new VueRouter({
  mode: 'history', // 使用 HTML5 History API
  routes
});
 
new Vue({
  router,
  template: '<div><router-link to="/home">Home</router-link><router-link to="/about">About</router-link><router-view></router-view></div>'
}).$mount('#app');

在这个例子中，当你点击 Home 或 About 链接时，Vue-router 会使用 history.pushState 来更新浏览器的地址栏而不刷新页面。

如果你想要在 Vue-router 中使用 replaceState，你可以在路由跳转时使用 router.replace() 方法。例如：

// 当你想要替换当前的历史记录而不是添加新的记录时
this.$router.replace({ path: '/new-path' });

这样，Vue-router 就会使用 history.replaceState 来更改当前的历史记录条目，而不会在历史记录中创建一个新的条目。