Vue——路由跳转到外网站

VueJS 跳转外部网站实现

最新推荐文章于 2024-07-01 16:47:37 发布

原创最新推荐文章于 2024-07-01 16:47:37 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

在VueJS中，使用vue-router时如果要链接到外部网站，可以通过修改beforeEnter钩子函数来实现。例如，在`routes.js`中设置一个路由，并在beforeEnter钩子中利用`location.href`重定向到目标URL。

VueJs vue-router linking an external website地址：https://stackoverflow.com/questions/50633001/vuejs-vue-router-linking-an-external-website
在这里插入图片描述

demo：如系统状态是需要点击跳转到外网站

<v-list-item key="dashboard" to="/dashboard" v-ripple="false">
  <span class="iconfont icon-dashboard1"></span>
  <span style="height: 30px; line-height: 32px">系统状态</span>
</v-list-item>

routes.js：

const PLACEHOLDER = { template: "<div>PLACEHOLDER</div>" };

export default [
  {
    path: "/dashboard",
    component: () => PLACEHOLDER,
    beforeEnter() {
      location.href = "/dashboard";
    },
    meta: {
      title: "alpha",
    },
  },
 ]