在vuejs中重定向到页面和外部网址的教程

页面导航是任何网站的基本功能之一，从一个页面到另一个页面。

在普通的页面中，锚链接被用来从一个链接导航到另一个链接。

<a href="cloudhadoop.com/about">About</a>

在vuejs中，同样可以用绑定来代替。

<a :href="cloudhadoop.com/about">
 or 
<a v-bind:href="cloudhadoop.com/about">

这是在html模板中添加路径的固定方式，将在服务器级别重定向。

那么如何以编程方式导航到页面呢？这篇文章讲述了以编程方式导航页面的方法如下

一种方法是，Vue-router库提供导航机制，并配置为转发到另一个页面。另一种方法是使用window.location.href 来重定向页面。

这篇博文讲述了以下内容

• 转发到同一网站的其他页面
• 重定向到URL

这篇文章讲述了从website.com/about ，并希望导航到website.com/contact 页面。

在vuejs中重定向到页面和URL

有多种方法可以重定向到其他页面。

使用inbulit窗口对象

你必须使用window.location.href以编程方式设置url。

window.location.href = '/contact';

重定向到external url ，你必须在设置路径时用url代替路径。

window.location.href = 'facebook.com/pages/mypage';

使用Vue-router应用程序为联系路径配置了路由器。

const router = new VueRouter({
  routes: [
    {
      path: '/contact',
      name: 'contact',
      component: ContactComponent,
    }
  ]
});

用vue-router推送路径和路由名称的方法是很容易的。

转发一个带有路径的页面，如下所示

this.$router.push("/contact")

/contact 是你在vue-router声明中配置的路由的路径

路由名称，你必须用名称代替路径，如下所示

this.$router.push("contact")

可以用推送方式重定向外部URL，如下所示

用推送方式转发内部页面的方法是

this.$router.push("facebook.com/pages/mypage")