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

Posted 2023-02-16

【中文标题】访问外部链接路由器链接按钮

【英文标题】：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 中是如何渲染的？

【参考方案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 放置在正确的目录中。