深入理解History模式

一、History模式簡介

為了更好地優化用戶體驗，目前很多前端應用都採用了單頁面應用（SPAs）的方式。但是，這也帶來了一個新的問題：SPAs實現了虛擬的單頁面，但是URL卻沒變。

這時候就需要History模式解決這個問題。通過History.pushState()方法，我們可以在不刷新頁面的情況下改變URL，同時也可以通過History.popState()方法監聽URL的變化來實現頁面更新。

// pushState()用法示例：
history.pushState({page: 1}, "title 1", "?page=1");
console.log(history.state) // {page: 1}
console.log(location.href) // http://localhost:8080/?page=1

// popState()用法示例：
window.addEventListener("popstate", function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

二、History模式優缺點

使用History模式優點在於：

1、更好的用戶體驗，不用每次都刷新完整頁面；

2、更好的SEO，因為頁面地址更加清晰明了。

不過，History模式也存在一些缺點：

1、確保服務端渲染(Serverside rendering)可以正確處理URL；

2、使用時需要一些額外配置，例如設置404頁、服務端重定向；

3、需要使用漸進增強 (Progressive Enhancement)，即如果用戶的瀏覽器不支持 HTML5 history API 則為其提供一份合適的降級版本。

三、Webpack如何使用History模式

在Webpack中，可以通過使用webpack-dev-server中的historyApiFallback選項來啟用History模式。

//webpack.config.js
module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

四、Vue Router的History模式實現

在Vue Router中，可以通過mode屬性配置使用History模式。

//main.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

五、React Router的History模式實現

React Router也提供了History模式的實現，同樣是通過mode屬性配置。

//App.js

import React from 'react';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Home from './components/Home';

import About from './components/About';
function App() {
 return (


<Link to="/">Home


<Link to="/about">About
原創文章，作者：OEICL，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/369435.html