如何从 NUXTJS 的 URL 中删除 %20 和其他特殊字符？

Question

我正在做我的第一个严肃的 javascript 和 nuxt 项目。 我正在使用 Rest Country API 根据每个国家/地区名称创建动态页面。 像这样：

<nuxt-link :to="/countries/ + country.name.toLowerCase()"><span>Learn more...</span></nuxt-link>

但例如，奥兰群岛 URL 是这样的：/countries/åland%20islands

我想从 URL 中删除 %20 个字符以及其他特殊字符。 我可以在 nuxtjs 应用程序上哪里以及如何完成它？

如果您能给我一些解决方案，我将不胜感激。

Answer 1

我知道为时已晚，但是，我建议使用此方法。实际上，%20 替换了链接中的空格。我建议您在路由到链接之前应删除链接中的所有空格：

举个例子

<script>
   export default{
         methods:{

         VisitLink(name) {

              this.$router.push(name.trim().replace(/ /g, "- 
             ").toLowerCase());
},
         }
   }
</script>

我使用方法 trim() 来确保国家名称末尾没有任何空格。 然后，我删除 NAME 中所有剩余的空间。 但是，如果您仍然想使用 nuxtJs 链接，您可以创建一个类似的方法

<script>
 export default{
   methods:{
    getLink(name){
       return  name.trim().replace(/ /g, "- 
             ").toLowerCase()
     }
    }
  }
</script>

进而

<nuxt-link :to="getLink(country.name)"><span>Learn more...</span></nuxt-link>

我希望，它可以帮助某人

Answer 2

你试过 decodeURIComponent() 吗？

console.log(decodeURIComponent(country.name));