访问外部链接路由器链接按钮答案

【问题标题】：Access External Link router-link button访问外部链接路由器链接按钮
【发布时间】：2022-01-17 15:51:55
【问题描述】：

我想传递一个外部 URL 以供我的应用程序中的按钮访问。但是，我想全局访问这个 URL，但我无法实现它。运行我的实现时没有任何效果

global.js

export const baseAppUrl = 'http://localhost:8080'

组件.vue

<script>
import { baseAppUrl } from '@/global'
export default {
  name: "app-header",
  data: function () {
    return {
      baseAppUrl: baseAppUrl,
    };
  },
  methods: {
  },
};
</script>

<b-button size="sm" class="my-2 my-sm-0" :to="baseAppUrl">SINGUP</b-button>

【问题讨论】：

您能否详细说明“没有任何作用”的含义？ b-button 是一个 BootstrapVue 组件。它是如何导入到项目中的？ b-button 在 DOM 中是如何渲染的？

标签： vue.js vuejs2

【解决方案1】：

全局文件中的变量baseAppUrl 似乎加载正确。
问题是另一个问题：按钮应该像这样包裹在template标签中：

<template>
    <div>
        <p>This is the base app URL: {{ baseAppUrl }}</p>

        <b-button size="sm" class="my-2 my-sm-0" :to="baseAppUrl">SINGUP</b-button>
    </div>
</template>

<script>
import { baseAppUrl } from '@/global'
export default {
  name: "app-header",
  data: function () {
    return {
      baseAppUrl: baseAppUrl,
    };
  },
  methods: {
  },
};
</script>

另外确保文件global.js 放置在正确的目录中。

【讨论】：