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`。最后将这三者拼接起来，就可以得到完整的地址。

相关问题

vur-nuxt this.$router.push跳转页面后并刷新页面

在 Vue.js 的 Nuxt.js 框架中，使用 `this.$router.push` 进行页面跳转后，会直接刷新页面。Nuxt.js 是一个基于 Vue.js 的服务端渲染框架，它的路由跳转默认是通过客户端路由实现的，不会刷新整个页面。

如果你希望在页面跳转后刷新页面，可以考虑以下方法：

1. 使用 `this.$router.push` 进行页面跳转后，结合 `this.$nuxt.$nextTick` 方法来延迟执行刷新操作。例如：

   this.$router.push('/your-path').then(() => {
     this.$nuxt.$nextTick(() => {
       window.location.reload();
     });
   });

这里使用 `this.$nuxt.$nextTick` 方法等待下一次 DOM 更新后再执行刷新操作。

2. 在 `pages` 目录下的目标页面组件中，在 `mounted` 钩子函数中通过 `window.location.reload()` 方法来刷新页面。例如：

   export default {
     // 其他选项...
     mounted() {
       window.location.reload();
     }
   }

这种方式会在每次进入该页面时都触发刷新操作。

需要注意的是，刷新整个页面可能会导致数据丢失，并且不符合 Nuxt.js 的服务端渲染的特点。在大多数情况下，推荐通过 Vue 组件的数据驱动方式来更新页面内容，而不是刷新整个页面。

Nuxt3路由跳转的几种方式

在Nuxt.js 3中，路由跳转主要有以下几种方式：

1. **nuxt-link组件**：这是官方推荐的方式，通过`<nuxt-link>`标签可以在页面间无刷新地导航。例如：

   <nuxt-link to="/about">About</nuxt-link>

当用户点击链接时，会触发相应的路由变化。

2. **this.$router.push()**：在JavaScript或Vue组件内部，可以使用`this.$router.push()`方法来进行程序式的导航，比如：

   this.$router.push('/dashboard');

3. **使用vue-router提供的router对象**：可以直接操作`window.location`或`vueRouter`实例来改变路径，但这通常会导致页面刷新：

   window.location.href = '/contact';
   // 或者
   router.push('/settings');

4. **动态路由匹配**：利用动态参数（如`:param`)，可以在URL中创建可变部分，然后通过`params`对象传递数据：

   router.push({ name: 'user-profile', params: { userId: '123' } });