php .vue文件路由器链接到外部url?

cygmwpex  于 2022-12-21  发布在  PHP
关注(0)|答案(3)|浏览(134)

我正在修改我的laravel应用程序中.vue文件的导航菜单,我试图链接到一个外部url,比如https://google.com,但是如果我把代码修改成一个链接,这个链接在我编译的时候不会显示。
我试过将路由器链接更改为外部网站,但不起作用。它尝试以页面/https://google.com的形式转到该网站

<li class="nav-item" @click="closePanel">
            <router-link class="nav-link" to="/campaigns">
                <i class="fal fa-layer-group"></i>
                <span>Campaigns</span>
            </router-link>
        </li>
<li class="nav-item" @click="closePanel">
            <router-link class="nav-link" to="https://google.com">
                <i class="fal fa-layer-group"></i>
                <span>External website</span>
            </router-link>
        </li>
jdgnovmf

jdgnovmf1#

看来唯一的办法就是

<li class="nav-item" @click="closePanel">
            <a href="https://google.com" target="_blank" class="nav-link">
                <i class="fal fa-layer-group"></i>
                <span>External website</span>
            </a>
        </li>
l3zydbqr

l3zydbqr2#

一种方法是使用window.location.href,例如

<a href='redirectTo("https://google.com")'>Redirect to google</a>

以及redirectTo的方法定义

methods:{ 
      redirectTo(url){
        window.location.href=url;      
       } 
  }
7bsow1i6

7bsow1i63#

遵循这个代码。

<li class="nav-item" @click="closePanel">
       <router-link class="nav-link" to="https://google.com">
           <a href="https://google.com">
              <i class="fal fa-layer-group"></i>
              <span>External website</span>
           </a>
       </router-link>
    </li>

你犯了两个错误。

  1. router-link不考虑外部url。但是在下面的代码中,你可以用任何值填充prop 'to'。
    1.路由器链路可以 Package 一个元素。

相关问题