如何使列表元素可单击并重定向到vue.js中的url
我正在使用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>我已经为Google.vue的route.name创建了一个vue文件。按照这种设置方式，我将所有内容都添加到本地主机路径名中。但是，我希望这个特定的列表元素转到www.google.com中，而不是添加到路径中。这个是可能的吗？如果是，我应该将此链接添加到哪里？
回答 3
Stack Overflow用户
发布于 2018-08-10 01:59:00
对于更新的问题：
选项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
Stack Overflow用户
发布于 2018-08-10 02:03:31
<li v-on:click="window.location='https://www.google.com/'">Go to Google</li>
Stack Overflow用户
发布于 2018-08-10 08:25:35
只需使用锚标记而不是路由器链接
<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;
}https://stackoverflow.com/questions/51772726
复制相似问题