node.js - nuxt.js。生产中非根路径的模式 : spa. 问题

Question

我是日本人，英语不太好，抱歉。

我有一个像这样的 nuxt 项目。

模式为水疗。

目录构建

pages - index.vue
        index
          |_ child.vue
          |_ index.vue

pages/index.vue

<template>
  <div>
    {{ title }}
    <router-view />
  </div>
</template>

<script>
export default {
  computed: {
    title () {
      let title = ''
      if (this.$route.path === '/') {
        title = 'Parent'
      } else if (this.$route.path === '/child') {
        title = 'Child'
      }
      return title
    }
  }
}
</script>

当我构建(或生成)时，您可以获得child/index.html的静态文件。

我将 dist 内的内容上传到服务器。

但是如果我访问 http://deployedrootpath/child ，计算属性不起作用。

我认为发生这种情况是因为这些静态文件是在创建钩子(Hook)之前创建的。

它只能知道 asyncData 钩子(Hook)的返回值。

所以我确实喜欢这个。

中间件/redirect.js

export default function ({ route, redirect }) {
  if (route.path === '/child/') {
    // I need to set some params because of navigation duplication error of vue-router.
    redirect('/child', { params: { 'redirect': true } })
  }
}

pages/index/child.vue

<template>
  <div>
    child
  </div>
</template>

<script>
export default {
 middleware: 'redirect'
}
</script>

实际上它有效，但我知道这是一个糟糕的方法。

即使除此之外没有其他办法，我至少想隐藏重定向网址中的参数。

请帮助我。

Answer 1

我解决了。

nuxt.config.js

trailingSlash: true

这使得静态文件路径和 $route.path 相同。

https://nuxtjs.org/api/configuration-router/#trailingslash