Vue.js技术问题：如何在index.html文件中正确获取当前页面URL？

这个问题我之前也碰到过！本质原因是Vue Router实现的是单页应用（SPA）的前端路由切换——路由变化时浏览器只会更新地址栏，但不会重新加载整个页面。如果你只是在页面初始化时执行一次window.location.href，那拿到的自然永远是初始页面的URL。下面给你几个靠谱的解决方案：

1. 在Vue组件内直接获取实时路由 #

这是最推荐的方案，因为Vue Router已经内置了路由状态的响应式管理：

• 直接访问this.$route.fullPath就能拿到包含查询参数、哈希的完整当前路由路径，它会随着路由切换自动更新。
• 如果你需要在路由变化时触发逻辑，可以用watch监听$route的变化：

// 示例Vue组件
export default {
  mounted() {
    // 组件挂载时获取当前URL
    console.log('当前URL:', window.location.origin + this.$route.fullPath);
  },
  watch: {
    '$route'(toRoute) {
      // 路由切换时实时获取最新URL
      const currentFullUrl = window.location.origin + toRoute.fullPath;
      console.log('路由更新后的URL:', currentFullUrl);
      // 这里可以把URL赋值给你需要用到的变量或执行相关逻辑
    }
  }
}

2. 在全局脚本中监听路由变化 #

如果你的逻辑是在Vue实例外部（比如你提到的canvas-ui.js），可以通过Vue Router的钩子函数来监听路由变化：

// 假设你的canvas-ui.js中已经引入了Vue Router实例
import router from './router';

// 初始加载时获取一次URL
let currentUrl = window.location.href;
console.log('初始URL:', currentUrl);

// 监听路由切换完成事件
router.afterEach((to, from) => {
  // 更新当前URL
  currentUrl = window.location.href;
  // 或者用Vue Router提供的路由信息拼接完整URL
  // currentUrl = window.location.origin + to.fullPath;
  console.log('当前URL:', currentUrl);
  // 可以把URL挂载到window对象，方便其他地方调用
  window.currentUrl = currentUrl;
});

3. 监听浏览器原生事件（备选方案） #

如果因为某些原因无法使用Vue Router的钩子，也可以监听浏览器的路由相关事件：

// 监听history模式下的路由变化
window.addEventListener('popstate', () => {
  const currentUrl = window.location.href;
  console.log('当前URL:', currentUrl);
});

// 监听hash模式下的路由变化
window.addEventListener('hashchange', () => {
  const currentUrl = window.location.href;
  console.log('当前URL:', currentUrl);
});

不过这种方式不如Vue Router钩子可靠，因为可能会和其他自定义的popstate/hashchange事件冲突。

为什么之前的纯JS方式不行？ #

大概率是你只在页面初始化时执行了一次const url = window.location.href，这个变量只会保存初始值，路由切换时不会自动更新。必须在路由变化的时机重新获取URL，或者使用Vue Router提供的响应式路由状态。

内容的提问来源于stack exchange，提问作者WebM