Vue 项目跳转页面的几种方式

在Vue.js项目中，页面跳转是一个常见的操作。无论是实现单页面跳转还是传统多页面跳转，都需要了解不同的页面跳转方式以满足不同的需求。在本文中，我们将探讨几种在Vue项目中跳转页面的方式。

1. 方式

1.1. 使用 Vue Router 进行页面导航

Vue Router是Vue.js的官方路由管理器，用于构建单页面应用（SPA）。它提供了一种结构化的方式来管理页面导航和路由状态。

在这里我们只讨论通过 Vue Router 进行页面跳转的方式。这里给出最基本的演示。

<template>
  <button click="goToAboutPage">Go to About Page</button>
</template>

<script>
export default {
  methods: {
    goToAboutPage() {
      this.$router.push('/about'); // 使用Vue Router导航到 /about路由
    }
  }
}
</script>

以及，我们跳转时还可以用 Vue Router 传递参数跳转。

  this.$router.push({ path: '/user', query: { id: userId } });

即跳转为 /user?id=userId
我们可以在跳转到的对应组件，通过 this.$route.query.id 来接收参数。

此外，我们还可以通过其它方式跳转到页面，并配合 Vue router 路由接收参数。如配置路由：

{
    path: '/article',
    name: 'article',
    component: () => ArticleView,
    props: (route) => ({
      id: route.query.id
    })
},

然后我们只需要进行常规跳转，带上参数即可，同样可以在对应的 view 中获取id 这个参数。
也可以在 export default 中声明props 来接收 id 参数。

1.2. Vue + JavaScript 常规跳转

此方式可以做到打开新的页面并跳转，配合上方配置路由参数的方式，打开新 view 很有用。

openNewPage() {
  const newPageUrl = '/new-page'; // 新页面的URL
  window.open(newPageUrl, '_blank'); // 打开新的浏览器窗口或标签页
}

当然，也可以在当前页面重定向。

redirectToAboutPage() {
  window.location.href = '/about'; // 使用JavaScript重定向到/about页面
}

使用下方方式在当前页面跳转，不会保存浏览记录：

redirectToAboutPage() {
  window.location.replace('/about');
}

调用方法时，这个都一样。 vue基础了：

  <div @click="redirectToAboutPage">Go to About Page</div>

1.3. 使用 router-link

和 HTML 的 a 标签一个很大的区别就是，因为是用的 Vue-router 跳转（针对 SPA）它不会重载页面，而是导航过去。
并且是基于配置的路由导航。

<router-link to="/user">Go to User Page</router-link>

1.4. 使用 HTML a 标签

这个就是 HTML a 标签实现了，跳转时会对页面重载，而不是直接导航过去。

  <a href="/about">Go to About Page</a>

2. 对比

2.1 使用 Vue Router 进行页面导航 (推荐)

官方推荐的方式，与 Vue.js 深度集成。
支持路由参数传递和接收，使页面之间的数据传递更容易。
支持导航守卫，可以进行路由前置处理。
单页面应用的标准选择。

6.2 Vue + JavaScript 常规跳转

简单易用，不需要额外的路由配置。
可以在新窗口或标签页中打开页面。
可以实现页面重定向。

缺点:

不适用于单页面应用，不具备路由管理能力。
在单页面应用中可能会导致整体路由结构混乱。

3.3 使用 router-link

基于 Vue Router，可实现路由导航。
与 Vue.js深度集成，支持路由参数传递。

3.4 使用 HMTL a 标签

最简单的方式，不需要额外的 Vue.js 或 Vue Router 配置。
适用于传统的多页面应用。

缺点：

会导致页面重载，不适用于单页面应用。
无法方便地传递参数。

Vue 项目 跳转页面的几种方式