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 组件的数据驱动方式来更新页面内容，而不是刷新整个页面。

nuxt 判断是pc端和移动端跳转路由

在 Nuxt.js 中，我们可以使用插件判断是 PC 端还是移动端，然后根据不同的设备跳转到不同的路由。

下面的代码演示了如何编写一个插件来实现这个功能：

// plugins/device.js

export default ({ app }, inject) => {
  const userAgent = process.server
    ? app.$ua.get('User-Agent')
    : navigator.userAgent

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    userAgent
  )

  inject('device', {
    isMobile,
    redirect(path) {
      const url = isMobile ? `/m${path}` : path
      if (process.client) {
        window.location.href = url
      } else {
        app.context.redirect(url)
      }
    }
  })
}

在插件中，我们首先获取了用户代理（userAgent），然后使用正则表达式来判断是否是移动设备。如果是移动设备，我们就将路径前缀设置为 "/m"，否则就保持原样。

接着，我们定义了一个名为 "redirect" 的方法，用于根据设备类型跳转路由。如果在客户端中调用该方法，我们就直接跳转到指定的 URL；如果在服务器端中调用该方法，我们就使用上下文对象（context）的 redirect 方法来跳转路由。

最后，我们将插件作为 Nuxt.js 的插件进行注册：

// nuxt.config.js

export default {
  plugins: ['~/plugins/device.js']
}

现在，我们就可以在页面中使用该插件了。例如，我们可以编写一个页面组件来测试：

<!-- pages/index.vue -->

<template>
  <div>
    <h1>首页</h1>
    <button @click="goToAbout">跳转到关于页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$device.redirect('/about')
    }
  }
}
</script>

在上面的代码中，我们定义了一个按钮，当用户点击该按钮时，就会调用 $device.redirect 方法来跳转到 "/about" 路由。如果是在移动设备上访问，就会跳转到 "/m/about" 路由。