web-dev-qa-db-ja.com

外部WebサイトをリンクするVueJs vue-router

これは簡単かもしれませんが、ドキュメントを調べたところ、何も見つかりませんでした。 「github」リンクをgithub.comにリダイレクトしたい。ただし、リンクをたどるのではなく、 ' https://github.com 'をURLに追加するだけです。これがスニペットです：

 <BreadcrumbItem to='https://github.com'>
    <Icon type="social-github"></Icon>
 </BreadcrumbItem>

（これはカスタムCSSにiViewを使用していますが、「to」はルーターリンクと同じように機能します）。

何が起こっているのかはこれです： enter image description here

cssvue.jsvuejs2vue-routerrouterlink
12
nateph
<a :href="'//' + websiteUrl" target="_blank">
  {{ url }}
</a>
4
user3757628

私はダニエルのリンクを読み、回避策を見つけました：

{
     path: '/github',
     beforeEnter() {location.href = 'http://github.com'}
}
2
nateph

次のいずれかを行うことができます。

  • 通常のリンクを使用してください<a href=...
  • @clickハンドラーを使用してwindow.location = http:// そこ。
1
Aurélien Bottazini
const github = { template: '<div>github</div>'}

        const routes = [
                { 
                        path: '/github',
                        beforeEnter() {location.href = 'http://github.com'},
                        component: github
                }
                ]

        const router = new VueRouter({
                routes
                })

        const app = new Vue({
                router
                }).$mount('#app')
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <script src="https://unpkg.com/vue/dist/vue.js"></script>
          <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
<body>    
<div id="app">
  <li><router-link to="/github">github.com</router-link></li>
  <router-view></router-view>
</div>
</body>
0
Luke Marak

次のように、リンクブロックをブレッドクラムアイテム内に配置するだけです。

 <BreadcrumbItem>
  <a href="https://github.com">
    <Icon type="social-github"/>
  </a>
 </BreadcrumbItem>
0
Jamieplus