Question

我正在使用vue.js。我设置了一个导航栏，它有很多列表元素。我希望我的列表元素之一可以转到另一个网站，例如https://www.google.com/。我有一个路由器文件，该文件有多个子项（对于列表中的每个元素），并且每个子项都有三个组件，

路径，组件，名称。

在导航栏中，我已经进行了所有设置，

<li v-bind:class="{active: $route.name == '//name from router file for   
that child'}">
  <router-link to="//path for that child">Google</router-link>
</li>

我已经为route.name创建了一个vue文件，即Google.vue。设置方式中，我已将所有内容添加到localhost路径名中。但是，我希望该特定列表元素转到www.google.com而不是添加到路径上。这可能吗？如果是，该链接应该添加到哪里？

Answer 1

有关更新的问题：

选项1：删除<router-link>标签，并使链接看起来像这样：

<li @click="redirect('https://google.com')" v-bind:class="{active: $route.name == '//name from router file for   
that child'}"></li>

... in your .vue file redirect: function (url) { window.location=url; }

选项2：将导航卫士添加到您的Google路线。

{ path: '/google', beforeEnter(to, from, next) { window.location = "https://google.com"; } }

https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks

Answer 2

<li v-on:click="window.location='https://www.google.com/'">Go to Google</li>

Answer 3

只需使用锚标记而不是路由器链接

<li>
    <a class="text-link" href="www.google.com">Google</a>
</li>

根据您的意愿对其进行样式设置

.text-link,
.text-link:active,
.text-link:focus,
.text-link:hover,
.text-link:visited {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

如何使列表元素可点击并重定向到vue.js中的URL

3 个答案: