// pushState - 往歷史記錄里塞一條新的
history.pushState({page: 1}, "標(biāo)題", "/page1");

// replaceState - 把當(dāng)前這條記錄給替換了
history.replaceState({page: 2}, "標(biāo)題", "/page2");

// 跨域操作？門兒都沒有！
try {
  history.pushState({}, "", "https://baidu.com/some-page");
} catch (e) {
  console.error("報(bào)錯(cuò)了吧！SecurityError: The operation is insecure.");
}

// router/index.js 里常見的配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue') // 懶加載，省流量
  }
]

const router = new VueRouter({
  mode: 'history',  // 關(guān)鍵配置！開啟history模式
  base: process.env.BASE_URL,
  routes
})

export default router

// 這是Vue Router內(nèi)部的大致實(shí)現(xiàn)思路，不是完整源碼
class HTML5History extends History {
  constructor(router, base) {
    super(router, base)
    
    // 初始化時(shí)先處理一下當(dāng)前URL
    const initLocation = getLocation(this.base)
    // 監(jiān)聽popstate事件，處理瀏覽器前進(jìn)后退
    window.addEventListener('popstate', e => {
      const current = this.current
      // 處理路由變化...
      this.transitionTo(location, route => {
        if (e.state) {
          // 處理state數(shù)據(jù)
        } else {
          // 兼容處理，有些瀏覽器popstate不觸發(fā)state
        }
      })
    })
  }

  push(location, onComplete, onAbort) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      // 關(guān)鍵代碼！調(diào)用原生pushState
      pushState(cleanPath(this.base + route.fullPath))
      // 觸發(fā)afterEach鉤子
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

  replace(location, onComplete, onAbort) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      // 關(guān)鍵代碼！調(diào)用原生replaceState
      replaceState(cleanPath(this.base + route.fullPath))
      handleScroll(this.router, route, fromRoute, true)
      onComplete && onComplete(route)
    }, onAbort)
  }
}

// 封裝的pushState函數(shù)
function pushState(url, replace) {
  // 保存滾動(dòng)位置
  saveScrollPosition()
  // 調(diào)用原生API
  try {
    if (replace) {
      history.replaceState({ key: getStateKey() }, '', url)
    } else {
      history.pushState({ key: getStateKey() }, '', url)
    }
  } catch (e) {
    // 降級處理，萬一不支持就強(qiáng)制跳轉(zhuǎn)
    window.location[replace ? 'replace' : 'assign'](url)
  }
}

// 在某個(gè)Vue組件里，你腦子一抽寫了這行代碼
history.pushState({}, "", "/new-page");

// 結(jié)果：
// 1. 地址欄確實(shí)變成 /new-page 了 ?
// 2. 但是！Vue Router根本不知道這事 ?
// 3. $route.path 還是舊的 ?
// 4. 路由守衛(wèi)沒觸發(fā) ?
// 5. 組件沒切換 ?
// 6. 用戶刷新頁面，直接404或者顯示/new-page對應(yīng)的內(nèi)容（如果有的話）

// 更慘的是，這時(shí)候用戶點(diǎn)瀏覽器后退按鈕
// Vue Router會(huì)一臉懵逼：這是哪？我沒記錄過這個(gè)路由?。?
// 然后各種異常行為就出現(xiàn)了

// 存點(diǎn)有用的數(shù)據(jù)
history.pushState(
  { 
    userId: 12345, 
    fromPage: 'home',
    scrollPosition: 500,
    timestamp: Date.now()
  }, 
  "", 
  "/user/profile"
);

// 以后可以通過event.state取到
window.onpopstate = function(event) {
  console.log("之前存的數(shù)據(jù)：", event.state);
  // 輸出：{ userId: 12345, fromPage: 'home', ... }
  
  // 可以恢復(fù)滾動(dòng)位置
  if (event.state && event.state.scrollPosition) {
    window.scrollTo(0, event.state.scrollPosition);
  }
};

// 你寫了
history.pushState({}, "這是新標(biāo)題", "/new-page");

// 瀏覽器：嗯，知道了，但我不改title
// 所以還得手動(dòng)改
document.title = "這是新標(biāo)題";

// 這些都可以
history.pushState({}, "", "/new-page");           // 相對根路徑
history.pushState({}, "", "new-page");            // 相對當(dāng)前路徑
history.pushState({}, "", "/user/123/edit");     // 帶參數(shù)
history.pushState({}, "", "?tab=2");              // 只改query
history.pushState({}, "", "#section3");           // 只改hash

// 這些不行，直接報(bào)錯(cuò)
history.pushState({}, "", "https://other.com/page");  // 不同域名
history.pushState({}, "", "http://other.com/page");        // 協(xié)議相對URL也不行
history.pushState({}, "", "http://當(dāng)前域名/page");     // 協(xié)議不同（http vs https）

初始狀態(tài)：頁面A（當(dāng)前）
         ↓
pushState到頁面B后：頁面A → 頁面B（當(dāng)前）
                   ↑
                   后退能回到A

初始狀態(tài)：頁面A（當(dāng)前）
         ↓
replaceState到頁面B后：頁面B（當(dāng)前）【頁面A被替換了】
                      ↑
                      后退直接跳到A之前的歷史記錄（比如頁面0）

// 場景：用戶從商品列表點(diǎn)進(jìn)詳情頁，應(yīng)該能后退回列表
// 用pushState
this.$router.push('/product/123');
// 或者原生
history.pushState({}, "", "/product/123");

// 歷史記錄：列表頁 → 詳情頁（當(dāng)前）
// 用戶點(diǎn)后退：回到列表頁 ?

// 場景：用戶在詳情頁切換SKU（規(guī)格），不應(yīng)該增加歷史記錄
// 用replaceState
this.$router.replace('/product/456');
// 或者原生
history.replaceState({}, "", "/product/456");

// 歷史記錄：列表頁 → 詳情頁-新SKU（當(dāng)前，替換了原來的詳情頁）
// 用戶點(diǎn)后退：直接回到列表頁，跳過SKU切換的過程 ?

// 登錄成功后，不想讓用戶后退回到登錄頁
this.$router.replace('/dashboard');
// 而不是
this.$router.push('/dashboard');

// 這樣用戶點(diǎn)后退，直接跳到登錄前的頁面（比如首頁），而不是登錄頁
// 體驗(yàn)好很多，不然用戶后退看到登錄頁會(huì)懵逼：我不是剛登過嗎？

// 表單提交成功，跳轉(zhuǎn)到結(jié)果頁
submitForm() {
  api.submit(this.formData).then(res => {
    // 用replace，避免用戶后退回到表單頁又提交一次
    this.$router.replace(`/order/success?orderId=${res.id}`);
  });
}

// 比如支付頁面，帶個(gè)臨時(shí)token，不想留在歷史記錄里
this.$router.replace({
  path: '/payment',
  query: { token: 'temp_token_123' }  // 這個(gè)token用完即焚
});

// 支付完成后
this.$router.replace('/payment/success');  // 又把token清掉了

// 整個(gè)過程歷史記錄很干凈

// 表單組件
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        content: ''
      },
      submitting: false
    }
  },
  
  methods: {
    async handleSubmit() {
      if (this.submitting) return;  // 防連點(diǎn)
      
      this.submitting = true;
      
      try {
        const res = await this.$http.post('/api/feedback', this.form);
        
        // 關(guān)鍵！用replace跳轉(zhuǎn)，不留歷史記錄
        this.$router.replace({
          name: 'FeedbackSuccess',
          params: { id: res.data.id }
        });
        
      } catch (error) {
        this.$message.error('提交失?。? + error.message);
      } finally {
        this.submitting = false;
      }
    }
  }
}

// 成功頁組件
export default {
  beforeRouteEnter(to, from, next) {
    // 甚至可以加個(gè)守衛(wèi)，確保只能從表單頁進(jìn)來
    if (from.name !== 'FeedbackForm') {
      next({ name: 'FeedbackForm' });  // 直接進(jìn)成功頁？打回表單頁
    } else {
      next();
    }
  }
}

// 列表頁組件
export default {
  data() {
    return {
      list: [],
      filters: {
        category: 'all',
        sort: 'newest'
      },
      scrollTop: 0
    }
  },
  
  methods: {
    handleFilterChange(newFilters) {
      this.filters = newFilters;
      this.fetchData();
      
      // 把篩選條件塞進(jìn)URL，但用replace不增加歷史記錄
      // 用戶刷新頁面時(shí)篩選條件還在，但后退不會(huì)回到上一次的篩選
      this.$router.replace({
        query: { ...this.filters }
      });
    },
    
    goToDetail(item) {
      // 去詳情頁之前，保存當(dāng)前狀態(tài)
      const state = {
        filters: this.filters,
        scrollPosition: document.documentElement.scrollTop,
        timestamp: Date.now()
      };
      
      // 這里用pushState，但要手動(dòng)調(diào)用，因?yàn)閂ue Router的push不支持自定義state
      // 這是個(gè)騷操作，慎用！
      history.pushState(state, "", `/detail/${item.id}`);
      
      // 然后告訴Vue Router去這個(gè)路由，但不觸發(fā)它的pushState
      this.$router.push(`/detail/${item.id}`).catch(() => {});
    }
  },
  
  // 從詳情頁后退回來時(shí)恢復(fù)狀態(tài)
  activated() {  // 用了keep-alive的話
    const state = history.state;
    if (state && state.filters) {
      this.filters = state.filters;
      this.$nextTick(() => {
        window.scrollTo(0, state.scrollPosition || 0);
      });
    }
  }
}

// router.js 里的全局守衛(wèi)
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  const userRole = store.state.user.role;
  
  // 需要登錄但沒token
  if (to.matched.some(record => record.meta.requiresAuth) && !token) {
    // 用replace，不留登錄頁的歷史記錄
    next({ 
      name: 'Login', 
      replace: true,
      query: { redirect: to.fullPath }  // 記住想去的頁面，登錄后跳轉(zhuǎn)
    });
    return;
  }
  
  // 需要特定角色
  if (to.meta.requiredRole && to.meta.requiredRole !== userRole) {
    // 沒權(quán)限，replace到403頁
    next({ 
      name: 'Forbidden', 
      replace: true 
    });
    return;
  }
  
  next();
});

// App.vue 或者某個(gè)布局組件的created里
created() {
  const query = { ...this.$route.query };
  let hasChange = false;
  
  // 清理一次性參數(shù)
  if (query.notificationRead) {
    delete query.notificationRead;
    // 標(biāo)記通知已讀的邏輯...
    hasChange = true;
  }
  
  // 清理空值參數(shù)
  Object.keys(query).forEach(key => {
    if (query[key] === '' || query[key] === null || query[key] === undefined) {
      delete query[key];
      hasChange = true;
    }
  });
  
  if (hasChange) {
    // 清理完用replace更新URL，不增加歷史記錄
    this.$router.replace({ query });
  }
}

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;  # 打包后的dist目錄
    
    location / {
        # 關(guān)鍵配置！所有路由都指向index.html
        try_files $uri $uri/ /index.html;
    }
    
    # API代理
    location /api {
        proxy_pass http://backend_server;
    }
}

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

const express = require('express');
const path = require('path');
const app = express();

// 靜態(tài)資源
app.use(express.static(path.join(__dirname, 'dist')));

// 所有路由返回index.html，讓Vue Router處理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000);

// vue.config.js
module.exports = {
  devServer: {
    historyApiFallback: true,  // 開發(fā)時(shí)自動(dòng)處理
    // 或者更精細(xì)的配置
    historyApiFallback: {
      rewrites: [
        { from: /^\/api/, to: '/api' },  // API請求不轉(zhuǎn)發(fā)
        { from: /./, to: '/index.html' }  // 其他都轉(zhuǎn)發(fā)
      ]
    }
  }
}

// 在main.js或者某個(gè)全局文件里，加個(gè)監(jiān)聽看看是不是有人瞎搞
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

history.pushState = function(...args) {
  console.warn('有人直接調(diào)用了pushState！', new Error().stack);
  return originalPushState.apply(this, args);
};

history.replaceState = function(...args) {
  console.warn('有人直接調(diào)用了replaceState！', new Error().stack);
  return originalReplaceState.apply(this, args);
};

const router = new VueRouter({
  mode: 'hash',  // 改成hash模式，URL會(huì)帶#，但不會(huì)404
  routes
});

// 錯(cuò)誤的期待
window.addEventListener('popstate', (e) => {
  console.log('popstate觸發(fā)！', e.state);
});

history.pushState({page: 1}, "", "/page1");
// 你以為會(huì)打印日志？并不會(huì)！

// 正確的理解
history.pushState({page: 1}, "", "/page1");  // 不觸發(fā)popstate
history.back();  // 這才觸發(fā)popstate！

// 在表單組件里
export default {
  data() {
    return {
      formDirty: false,  // 表單是否被修改過
      confirmed: false   // 用戶是否確認(rèn)離開
    }
  },
  
  mounted() {
    // 監(jiān)聽瀏覽器后退/前進(jìn)
    window.addEventListener('popstate', this.handlePopState);
    
    // 監(jiān)聽頁面關(guān)閉/刷新
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  
  beforeDestroy() {
    window.removeEventListener('popstate', this.handlePopState);
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  },
  
  methods: {
    handlePopState(e) {
      // 注意：這時(shí)候路由已經(jīng)變了，但Vue可能還沒反應(yīng)過來
      if (this.formDirty && !this.confirmed) {
        // 阻止默認(rèn)行為是不可能的，popstate沒法阻止
        // 只能把用戶推回去，或者給個(gè)提示
        
        // 推回去（體驗(yàn)不太好，但有效）
        history.forward();
        
        // 或者顯示個(gè)對話框
        this.showConfirmDialog().then(confirmed => {
          if (confirmed) {
            this.confirmed = true;
            history.back();  // 再次后退
          }
        });
      }
    },
    
    handleBeforeUnload(e) {
      if (this.formDirty) {
        e.preventDefault();
        e.returnValue = '';  // Chrome需要這個(gè)
      }
    },
    
    // 更好的做法：用Vue Router的導(dǎo)航守衛(wèi)
    beforeRouteLeave(to, from, next) {
      if (this.formDirty && !this.confirmed) {
        this.$confirm('有未保存的更改，確定離開嗎？', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          next();
        }).catch(() => {
          next(false);  // 取消導(dǎo)航
        });
      } else {
        next();
      }
    }
  }
}

// 場景1：協(xié)議不同
// 當(dāng)前是 https://example.com
history.pushState({}, "", "http://example.com/page");  // http vs https，不行

// 場景2：端口不同
// 當(dāng)前是 http://localhost:8080
history.pushState({}, "", "http://localhost:3000/page");  // 8080 vs 3000，不行

// 場景3：子域名不同（某些瀏覽器嚴(yán)格模式）
// 當(dāng)前是 https://www.example.com
history.pushState({}, "", "https://api.example.com/page");  // 可能不行

// 別這么干！
history.pushState({
  hugeData: Array(1000000).fill('x'),  // 100萬個(gè)字符，瘋了吧
  imageBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...',  // 大圖轉(zhuǎn)base64
  fullPageHTML: document.documentElement.outerHTML  // 整個(gè)頁面HTML，瘋了吧
}, "", "/page");

// 只存關(guān)鍵標(biāo)識
history.pushState({
  pageId: 'product-123',
  scrollPosition: window.scrollY,
  timestamp: Date.now()
}, "", "/product/123");

// 大數(shù)據(jù)存 IndexedDB 或者 sessionStorage
sessionStorage.setItem('product-123-data', JSON.stringify(hugeData));

// 封裝一個(gè)可靠的push方法
function safePushState(data, title, url) {
  try {
    // iOS Safari兼容性處理
    const safeTitle = title || document.title || '';
    history.pushState(data, safeTitle, url);
    
    // 微信瀏覽器延遲處理
    if (/MicroMessenger/i.test(navigator.userAgent)) {
      return new Promise(resolve => setTimeout(resolve, 50));
    }
  } catch (e) {
    console.error('pushState失敗:', e);
    // 降級處理
    window.location.href = url;
  }
}

// router.js
router.beforeEach(async (to, from, next) => {
  // 顯示loading
  store.commit('SHOW_LOADING');
  
  // 獲取用戶權(quán)限（可能從接口拿，可能從store拿）
  const userPerms = await store.dispatch('getUserPermissions');
  
  if (to.meta.permission && !userPerms.includes(to.meta.permission)) {
    // 沒權(quán)限，直接replace，不留下當(dāng)前路由的歷史記錄
    next({ 
      name: 'Login', 
      replace: true,
      query: { 
        redirect: to.fullPath,
        reason: 'no-permission'  // 可以加個(gè)標(biāo)記，登錄頁顯示特殊提示
      }
    });
    return;
  }
  
  // 有權(quán)限，正常走
  next();
});

router.afterEach(() => {
  // 隱藏loading
  store.commit('HIDE_LOADING');
});

// 支付頁面
methods: {
  initPayment() {
    // 獲取支付token（這個(gè)token很敏感，不想放URL）
    api.getPaymentToken().then(token => {
      // 用replaceState把token存進(jìn)history state
      // 注意：這里要結(jié)合Vue Router的replace使用
      const currentState = history.state || {};
      history.replaceState(
        { ...currentState, paymentToken: token },
        '',
        this.$route.fullPath
      );
      
      // 然后繼續(xù)支付流程
      this.startPayment(token);
    });
  }
},

// 支付結(jié)果頁（同一路由下，或者后退回來）
mounted() {
  // 從state里取token
  const state = history.state || {};
  if (state.paymentToken) {
    this.verifyPayment(state.paymentToken);
  } else {
    // token沒了？可能是用戶刷新了，去查接口或者報(bào)錯(cuò)
    this.handleMissingToken();
  }
}

// 在一個(gè)復(fù)雜的表單頁面
export default {
  data() {
    return {
      step: 1,
      maxStepReached: 1,
      formData: {}
    }
  },
  
  created() {
    // 初始化時(shí)根據(jù)當(dāng)前step設(shè)置state
    this.syncHistoryState();
  },
  
  methods: {
    goToStep(step) {
      this.step = step;
      this.maxStepReached = Math.max(this.maxStepReached, step);
      this.syncHistoryState();
    },
    
    syncHistoryState() {
      // 每步都push一個(gè)新歷史記錄
      const state = { step: this.step, t: Date.now() };
      const url = `${this.$route.path}?step=${this.step}`;
      
      // 只有步驟前進(jìn)時(shí)才push，后退時(shí)不push（避免死循環(huán)）
      const currentState = history.state || {};
      if (currentState.step < this.step) {
        history.pushState(state, '', url);
      } else {
        history.replaceState(state, '', url);
      }
    },
    
    handlePopState(e) {
      const state = e.state || {};
      if (state.step) {
        // 用戶點(diǎn)了后退/前進(jìn)，同步步驟
        this.step = state.step;
        // 可以在這里做步驟切換的動(dòng)畫
        this.animateStepChange();
      }
    }
  },
  
  mounted() {
    window.addEventListener('popstate', this.handlePopState);
  },
  
  beforeDestroy() {
    window.removeEventListener('popstate', this.handlePopState);
  }
}

// router.js
const router = new VueRouter({
  mode: 'history',  // 默認(rèn)history
  routes: [
    // 新頁面，走h(yuǎn)istory
    { path: '/new-feature', component: NewFeature },
    
    // 老頁面，重定向到hash模式
    { 
      path: '/legacy-page', 
      beforeEnter(to, from, next) {
        // 強(qiáng)制跳轉(zhuǎn)到hash模式
        window.location.href = '/#/legacy-page';
      }
    }
  ]
});

// 或者反過來，默認(rèn)hash，特殊路由用history
// 這個(gè)更復(fù)雜，需要手動(dòng)管理

// 一個(gè)帶很多篩選條件的列表頁
methods: {
  updateFilters(newFilters) {
    // 清理默認(rèn)值
    const cleanFilters = {};
    Object.keys(newFilters).forEach(key => {
      const value = newFilters[key];
      // 去掉空值、undefined、和默認(rèn)值一樣的值
      if (value !== '' && value !== undefined && value !== null && value !== this.defaultFilters[key]) {
        cleanFilters[key] = value;
      }
    });
    
    // 用replace更新URL，不增加歷史記錄
    // 但用query記錄，這樣刷新頁面篩選條件還在
    this.$router.replace({
      query: Object.keys(cleanFilters).length > 0 ? cleanFilters : undefined
    }).catch(() => {});
    
    // 實(shí)際發(fā)請求
    this.fetchList(cleanFilters);
  }
}