nuxt.js。模式：温泉。生产中不是根路径的问题

Posted 2023-02-22

【中文标题】nuxt.js。模式：温泉。生产中不是根路径的问题

【英文标题】：nuxt.js. mode: spa. problem in not root path on production

【发布时间】：2020-05-12 10:58:02

【问题描述】：

我是个日本人，不擅长英语对不起。

我有一个这样的 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，计算的属性就不起作用了。

我认为这是因为这些静态文件是在创建钩子之前创建的。

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

所以我确实喜欢这个。

中间件/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>

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

即使除此之外别无他法，我至少想从重定向的 url 中隐藏参数。

请帮帮我。

【问题讨论】：

尝试在 page/index 中使用 mounted 挂钩，而不是计算出来

谢谢。实际上问题是由于 url 的路径和 $route.path 之间的差异，我想让它们相等。所以我使用了trailingSlash: true。

【参考方案1】：

我解决了。

nuxt.config.js

trailingSlash: true

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

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