blocks|key|4276794|text|我阅读了Daniel的链接，并找到了一个解决方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4276795|{
+++++path:+'/github',
+++++beforeEnter()+{location.href+=+'http://github.com'}
}|code-block|syntax|javascript|4276796|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I read Daniel's Link and found a workaround:</p>

<pre><code>{
     path: '/github',
     beforeEnter() {location.href = 'http://github.com'}
}
</code></pre>


blocks|key|4276423|text|<a+:href="'//'+%2B+websiteUrl"+target="_blank">
++{{+url+}}
</a>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4276424|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;a :href="'//' + websiteUrl" target="_blank"&gt;
  {{ url }}
&lt;/a&gt;
</code></pre>


blocks|key|4276500|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4276501|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')|code-block|syntax|javascript|4276502|<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>|4276503|4276504|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const github = { template: '&lt;div&gt;github&lt;/div&gt;'}

	const routes = [
		{ 
			path: '/github',
			beforeEnter() {location.href = 'http://github.com'},
			component: github
		}
		]

	const router = new VueRouter({
		routes
		})

	const app = new Vue({
		router
		}).$mount('#app')</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
	  &lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
	  &lt;script src="https://unpkg.com/vue-router/dist/vue-router.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
&lt;body&gt;    
&lt;div id="app"&gt;
  &lt;li&gt;&lt;router-link to="/github"&gt;github.com&lt;/router-link&gt;&lt;/li&gt;
  &lt;router-view&gt;&lt;/router-view&gt;
&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4276565|text|如果需要，一种更动态的方法是仅覆盖某些方法，以检测何时应使用route.meta.external以外部方式处理路由|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4276566|++//+Override+matcher+to+fix+external+links.
++const+match+=+router.matcher.match
++router.matcher.match+=+(...args)+=>+{
++++let+route+=+match.apply(router,+args)
++++if+(!route.meta.external)+{
++++++return+route
++++}
++++return+Object.freeze({...route,+fullPath:+route.path})
++}

++//+Override+resolver+to+fix+external+links.
++const+resolve+=+router.resolve
++router.resolve+=+(...args)+=>+{
++++const+resolved+=+resolve.apply(router,+args)
++++if+(resolved.route.meta.external)+{
++++++resolved.href+=+resolved.route.fullPath
++++}
++++return+resolved
++}

++//+Handle+external+routes.
++router.beforeEach((to,+from,+next)+=>+{
++++if+(to.meta.external)+{
++++++if+(to.meta.newWindow)+{
++++++++window.open(to.fullPath)
++++++}
++++++else+{
++++++++window.location.replace(to.fullPath)
++++++}
++++++return+next(false)
++++}
++++next()
++})|code-block|syntax|javascript|4276567|entityMap^0|U|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>A more dynamic way if you need it is to just override certain methods to detect when a route should be handled in an external manner using <code>route.meta.external</code>:</p>

<pre class="lang-js prettyprint-override"><code>  // Override matcher to fix external links.
  const match = router.matcher.match
  router.matcher.match = (...args) =&gt; {
    let route = match.apply(router, args)
    if (!route.meta.external) {
      return route
    }
    return Object.freeze({...route, fullPath: route.path})
  }

  // Override resolver to fix external links.
  const resolve = router.resolve
  router.resolve = (...args) =&gt; {
    const resolved = resolve.apply(router, args)
    if (resolved.route.meta.external) {
      resolved.href = resolved.route.fullPath
    }
    return resolved
  }

  // Handle external routes.
  router.beforeEach((to, from, next) =&gt; {
    if (to.meta.external) {
      if (to.meta.newWindow) {
        window.open(to.fullPath)
      }
      else {
        window.location.replace(to.fullPath)
      }
      return next(false)
    }
    next()
  })
</code></pre>


blocks|key|4276477|text|只需将链接块放在breadcrumb项中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4276478|+<BreadcrumbItem>
++<a+href="https://github.com">
++++<Icon+type="social-github"/>
++</a>
+</BreadcrumbItem>|code-block|syntax|javascript|4276479|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just put the link block inside the breadcrumb item like this:</p>

<pre><code> &lt;BreadcrumbItem&gt;
  &lt;a href="https://github.com"&gt;
    &lt;Icon type="social-github"/&gt;
  &lt;/a&gt;
 &lt;/BreadcrumbItem&gt;
</code></pre>


blocks|key|4276661|text|只需使用"//“而不是http或https。这对我在路由器文件中是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4276662|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Just do &quot;//&quot; instead of http or https. This works for me in router file.</p>


blocks|key|4277114|text|我将在我的路由器配置文件中创建一个新路由，并在新选项卡中打开指向我的外部链接的路由。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4277115|{
++name:+"Github",
++beforeEnter()+{
++++window.open('https://www.github.com/',+'_blank')
++},
++component:+MyComponent,
},|code-block|syntax|javascript|4277116|然后，在我的模板中，我将创建一个简单的按钮，该按钮调用一个带有外部链接的新路由的函数。|4277117|<button+@click="onUserClick('Github')">Github</button>|4277118|setup+()+{
++const+router+=+useRouter()
++const+onUserClick+=+(linkTo)+=>+{
++++router.push({+name:+linkTo+})
++}
++return+{onUserClick}
}|4277119|这将使您可以非常轻松地将多个链接连接到外部路由。IE社交媒体页面不会弄乱你的组件。|4277120|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I would create a new route in my router config file with the route to my external link opening in a a new tab.</p>
<pre class="lang-js prettyprint-override"><code>{
  name: &quot;Github&quot;,
  beforeEnter() {
    window.open('https://www.github.com/', '_blank')
  },
  component: MyComponent,
},
</code></pre>

<p>Then in my template I would create a simple button that calls a function to the new route with the external link.</p>
<pre class="lang-html prettyprint-override"><code>&lt;button @click=&quot;onUserClick('Github')&quot;&gt;Github&lt;/button&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>setup () {
  const router = useRouter()
  const onUserClick = (linkTo) =&gt; {
    router.push({ name: linkTo })
  }
  return {onUserClick}
}
</code></pre>

<p>This will allow you have to multiple links to external routes very easily.  IE social media pages without cluttering up your component.</p>


blocks|key|4276613|text|我这样做的方式是使用一个方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4276614|<button+@click="redirect('https://www.google.com')>Click+me</button>


methods:
++++{
++++++++redirect:+function+(link,+target+=+'_blank')+{
++++++++++++window.open(link,+target);
++++++++}
+++++}|code-block|syntax|javascript|4276615|这只是一个例子，我通常在根组件上创建方法，并且可以使用$parent或bus访问它，具体取决于项目类型。|4276616|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>My way of doing that is using a method</p>
<pre><code>&lt;button @click=&quot;redirect('https://www.google.com')&gt;Click me&lt;/button&gt;


methods:
    {
        redirect: function (link, target = '_blank') {
            window.open(link, target);
        }
     }
</code></pre>
<p>This is just an example, I usually create the method on the root component and can access it using $parent or using bus depend on the project type.</p>


<p>This may be simple, but I've looked over documentation and can't find anything about it. I want to have my 'github' link redirect to say, github.com. However, its just appending '<a href="https://github.com" rel="noreferrer">https://github.com</a>' to my url instead of following the link. Here is a snippet:</p>

<pre><code> &lt;BreadcrumbItem to='https://github.com'&gt;
    &lt;Icon type="social-github"&gt;&lt;/Icon&gt;
 &lt;/BreadcrumbItem&gt;
</code></pre>

<p>(This is using iView for custom CSS, but 'to' works in the same way as router-link).</p>

<p>What ends up happening is this:
<a href="https://i.stack.imgur.com/sJieR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sJieR.png" alt="enter image description here"></a></p>


VueJs vue-router linking an external website

这可能很简单，但我已经查看了文档，但找不到任何关于它的信息。我想让我的'github‘链接重定向到github.com。然而，它只是将'‘附加到我的url中，而不是跟随链接。下面是一个代码片段： <BreadcrumbItem to='https://github.com'>    <Icon type="social-github"></Icon> </BreadcrumbItem>(这是对自定

问VueJs vue-链接外部网站的路由器
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJs vue-链接外部网站的路由器EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJs vue-链接外部网站的路由器
EN