javascript - vitepress怎样在[xx]({{url}}/admin)中的url位置使用变量？

Question

比如下面的用法 host 连接 admin，结果失败，地址变为 %28%7b%7bhost%7d%7d%2fadmin , 直接把 {}转义了，而且没有使用host作为变量。

期望的地址是 http://test.com/admin

<script setup>
import { ref } from 'vue'

const host = ref("http://test.com")
</script>

[Test]({{host}}/admin)

Answer 1

<!-- components/LinkWithVariable.vue -->
<template>
  <a :href="computedUrl"><slot /></a>
</template>

<script>
export default {
  props: {
    baseUrl: {
      type: String,
      required: true,
    },
    path: {
      type: String,
      required: true,
    },
  },
  computed: {
    computedUrl() {
      return `${this.baseUrl}${this.path}`;
    },
  },
};
</script>

<!-- yourMarkdownFile.md -->
<script setup>
import { ref } from 'vue';
import LinkWithVariable from './components/LinkWithVariable.vue';

const host = ref("http://test.com");
</script>

<LinkWithVariable :base-url="host" path="/admin">Test</LinkWithVariable>

Answer 2

我手头只有一个vuePress的项目，但是解决方法应该是一样的：
用动态绑定href的方式来替代双大括号的方式：

<script>
export default {
  data() {
    return {
      host :"http://test.com"
    }
  }

  
}
</script>

 <a v-bind:href="host + '/admin' " title="Test">Test</a>

注意host的声明代码要写在a标签之前，不然vuePress会报未声明变量，不清楚vitePress会不会这样，你可以自行测试一下