vue2 nuxt使用window.location.href没有获取到完整地址

在 Nuxt 中，可以使用 `this.$nuxt._router.history.base` 获取基本 URL，然后再使用 `window.location.pathname` 和 `window.location.search` 分别获取路径和查询参数，最后拼接起来即可获取完整地址。

示例代码如下：

const fullPath = this.$nuxt._router.history.base + window.location.pathname + window.location.search;
console.log(fullPath);

其中，`this.$nuxt._router.history.base` 可以获取到 Nuxt 应用的基本 URL，如 `/my-app/`，而 `window.location.pathname` 可以获取到当前页面的路径，如 `/about`，`window.location.search` 可以获取到当前页面的查询参数，如 `?id=123`。最后将这三者拼接起来，就可以得到完整的地址。

相关问题

vue中怎么监听window.location.href

在Vue中，你可以使用`watch`属性来监听`window.location.href`的变化。下面是一个示例代码：

export default {
  data() {
    return {
      currentUrl: window.location.href
    }
  },
  watch: {
    currentUrl(newUrl) {
      // 当window.location.href发生变化时，会触发这个函数
      console.log('当前URL发生变化：', newUrl);
    }
  },
  mounted() {
    // 监听window.location.href的变化
    window.addEventListener('popstate', () => {
      this.currentUrl = window.location.href;
    });
  },
  beforeDestroy() {
    // 在组件销毁前移除监听事件
    window.removeEventListener('popstate', () => {
      this.currentUrl = window.location.href;
    });
  }
}

在上面的代码中，我们首先在`data`中定义了一个`currentUrl`属性，用来保存当前的URL。然后，在`watch`中监听`currentUrl`的变化，当`currentUrl`发生变化时，会触发相应的函数。在`mounted`生命周期钩子中，我们使用`addEventListener`来监听`popstate`事件，当浏览器的历史记录发生变化时，会触发这个事件，我们在事件处理函数中更新`currentUrl`的值。最后，在`beforeDestroy`生命周期钩子中，我们移除了对`popstate`事件的监听。

这样，当`window.location.href`发生变化时，就会触发相应的函数，你可以在函数中进行相应的操作。

vue router如何实现window.location.href

Vue Router可以通过使用`router.push`方法来实现类似于`window.location.href`的跳转功能。具体实现方法如下：

// 在Vue组件中使用
this.$router.push('/your/path')

// 在JS代码中使用
import router from './router' // 引入Vue Router实例
router.push('/your/path')

其中，`/your/path`是你要跳转的路径。与`window.location.href`不同的是，使用Vue Router进行跳转时，页面不会重新加载，而是通过异步加载和按需加载的方式进行页面更新，从而提高了页面的性能和用户体验。