一遍文章搞懂Vue.js中的各种页面跳转方式和参数传递

2023-10-29

文章目录

一、介绍

1.1 Vue.js 是什么，它的路由系统是如何工作的

Vue.js 是一个流行的 JavaScript 框架，它提供了一套完整的路由系统来帮助我们实现 SPA（单页应用）的页面跳转和数据传递。Vue.js 的路由系统是基于浏览器端的 History API 和 hash 模式实现的，它使得我们可以在不刷新整个页面的情况下实现URL的变化和页面的切换。
本文将介绍在Vue.js中实现页面跳转的方式和参数传递的方法，帮助你更好地理解Vue.js 的路由系统和页面跳转机制。

二、路由基础

2.1 Vue.js 路由的概念和基本配置

在 Vue.js中，我们可以使用Vue Router插件来实现路由功能。Vue Router通过在 Vue实例中注册router实例，将路由信息注入到 Vue 实例中，使得我们可以通过路由信息来实现页面的切换和数据的传递。

在使用 Vue Router 之前，我们需要先安装它。在命令行中使用以下命令进行安装：

npm install vue-router

安装完成后，在Vue.js应用程序中引入 vue-router 库，并通过 Vue.use() 方法将其安装到 Vue.js 实例中。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2.2 路由表的使用方法

在 Vue.js 应用程序中使用路由，我们需要先定义一个路由表（route table），它包含了应用程序中所有路由的路径和对应的组件。例如：

import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

在路由表中，每个路由都包含了一个路径和对应的组件。当用户访问应用程序时，Vue Router 会根据路由表中定义的路由规则，匹配到合适的路由，并将对应的组件渲染到页面中。

三、页面跳转

在Vue.js中，我们可以使用 $router 对象来进行页面跳转。$router 对象是Vue Router提供的路由实例，它包含了一些常用的方法，例如push()、replace()、go()等。

3.1 使用 $router.push() 进行页面跳转

当使用this.$router.push()进行页面跳转时，新页面会被添加到历史记录中，因此在新页面中可以通过浏览器的返回按钮返回到之前的页面。同时，push() 方法还允许你传递一个参数对象，该对象可以包含任何你需要传递给目标页面的信息。在目标页面中，你可以通过 $route.params 访问到这些参数。
下面是一个简单的示例：

// 在当前页面中调用 push 方法
this.$router.push({
  name: 'destinationPage',
  params: {
    id: 1,
    name: 'John'
  }
})

在上面的代码中，我们使用push方法进行页面跳转，并传递了一个参数对象。该对象包含两个属性：id 和 name，分别对应着目标页面需要用到的两个参数。目标页面的路由配置可以如下：

{
  path: '/destination-page/:id',
  name: 'destinationPage',
  component: DestinationPage,
  props: true
}

在目标页面中，我们可以通过$route.params访问到传递过来的参数：

export default {
  mounted() {
    console.log(this.$route.params.id)   // 输出 1
    console.log(this.$route.params.name) // 输出 'John'
  }
}

注意，当你使用 $route.params 访问到参数时，实际上 $route 对象是 Vue-Router 内部提供的一个对象，它包含了当前路由的一些信息，包括路由参数、路径等。因此，你可以通过 $route.path 访问到当前页面的路径，通过$route.query访问到 URL 查询参数等。

3.2 使用 $router.replace() 进行页面跳转

当使用this.$router.replace()进行页面跳转时，与 push() 方法不同的是，新页面会替换当前页面，而不是添加到历史记录中。因此，在新页面中无法通过浏览器的返回按钮返回到之前的页面。同样，你也可以传递一个参数对象，并在目标页面中通过$route.params访问这些参数。

// 在当前页面中调用 replace 方法
this.$router.replace({
  name: 'destinationPage',
  params: {
    id: 1,
    name: 'John'
  }
})

在目标页面的路由配置和访问参数的方式与前面的push()方法相同，这里不再重复。

需要注意的是，使用 replace() 方法进行页面跳转时，由于新页面替换了当前页面，因此在新页面中刷新或重新加载页面时，会重新发送一次HTTP请求，而不是使用浏览器缓存中的内容。因此，如果需要在页面之间共享数据或状态，最好使用push()方法进行页面跳转。

3.3 使用 $router.go() 进行页面跳转

当使用 this.$router.go() 进行页面跳转时，可以通过传递一个整数来指定要前进或后退的步数。例如，go(-1) 相当于点击浏览器的后退按钮。

下面是一个简单的示例：

// 前进一步
this.$router.go(1)

// 后退两步
this.$router.go(-2)

需要注意的是，使用go()方法进行页面跳转时，只能在浏览器的历史记录中前进或后退，而不能跳转到指定的页面。因此，如果需要跳转到指定的页面，应该使用push()或 replace() 方法。

3.4 使用命名路由进行页面跳转

在 Vue Router 中，除了使用 this.$router.push() 和 this.$router.replace() 进行页面跳转之外，还可以通过在模板中使用<router-link>组件来进行跳转。这种方式也称为使用命名路由。

使用命名路由可以让我们在不同的组件中重复使用相同的路由配置。它还可以在组件之间建立更加明确的关系，使代码更加可读和易于维护。

下面是一个使用命名路由进行页面跳转的示例：

<!-- 在模板中使用 <router-link> 组件 -->
<router-link :to="{ name: 'destinationPage', params: { id: 1, name: 'John' } }">跳转到目标页面</router-link>

在上面的示例中，to 属性指定了要跳转到的目标页面的路由信息。name 属性指定了目标页面的名称，params 属性指定了要传递的参数。

需要注意的是，在使用命名路由进行页面跳转时，如果要跳转的目标页面使用了动态路由或查询参数，应该将这些信息包含在 to 属性中。例如，要跳转到一个动态路由页面 /user/:id，应该使用 :to="{ name: 'user', params: { id: userId } }"，其中 userId 是要跳转到的用户的 ID。

除了在模板中使用 <router-link> 组件之外，还可以在代码中使用$router.push()和 $router.replace() 方法来使用命名路由进行页面跳转。例如，可以使用以下代码将当前页面替换为名为 home 的目标页面：

this.$router.replace({ name: 'home' })

3.5 使用命名视图进行页面跳转

在Vue Router中，除了使用命名路由进行页面跳转之外，还可以使用命名视图来管理多个视图。使用命名视图可以让我们将页面拆分成多个区域，每个区域可以独立地渲染不同的组件。

下面是一个使用命名视图进行页面跳转的示例：

<!-- 在模板中使用 <router-link> 组件 -->
<router-link :to="{ name: 'destinationPage', query: { id: 1, name: 'John' } }">跳转到目标页面</router-link>

<!-- 在模板中定义命名视图 -->
<template>
  <div>
    <router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

在上面的示例中，<router-view> 组件有三个不同的 name 属性，分别为 header、default 和 footer，表示三个不同的命名视图。<router-link> 组件的to属性中指定了要跳转到的目标页面的路由信息，其中 query 属性指定了要传递的参数。

需要注意的是，在使用命名视图进行页面跳转时，需要将组件配置中的components属性改为views属性。例如，可以使用以下代码在路由配置中定义一个名为 destinationPage 的路由，该路由包含三个命名视图：

const router = new VueRouter({
  routes: [
    {
      path: '/destination',
      name: 'destinationPage',
      views: {
        header: Header,
        default: Destination,
        footer: Footer
      }
    }
  ]
})

在上面的代码中，views 属性中定义了三个命名视图，分别为 header、default 和 footer。在页面跳转时，通过在路由对象中指定 views 属性来渲染对应的组件。

3.6 使用重定向进行页面跳转

在Vue中，重定向是通过路由配置来实现的。它允许我们将URL重定向到另一个URL。重定向通常用于在访问某个URL时，自动跳转到另一个URL。

在实际应用中，重定向常常用于处理用户登录状态。如果用户未登录，则重定向到登录页面；如果已经登录，则重定向到首页或其他页面。

需要注意的是，如果我们使用了重定向功能，那么在浏览器的URL地址中，会看到最终重定向到的URL，而不是我们重定向之前的URL。

在Vue中，我们可以通过以下方式来实现重定向：

3.6.1 通过redirect属性来实现重定向

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      redirect: '/dashboard'
    },
    {
      path: '/dashboard',
      component: Dashboard
    }
  ]
})

上面的代码中，如果用户访问/home路径，则会自动重定向到/dashboard路径。

3.6.2 通过alias属性来实现重定向

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      alias: '/home'
    }
  ]
})

上面的代码中，如果用户访问/dashboard路径或/home路径，则都会展示Dashboard组件。

3.7 使用别名进行页面跳转

在Vue中，通过别名（alias）也可以实现页面跳转，它可以让我们给一个已有的路由路径设置另一个别名路径。这样，当用户访问这个别名路径时，实际上就是访问了原本的路由路径。

在路由配置中，我们可以使用alias属性来为路由设置别名，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      alias: '/index'
    }
  ]
})

上面的代码中，/home和/index都可以访问Home组件。

需要注意的是，使用别名不会改变浏览器地址栏中的URL路径，而只是将URL路径的别名映射到原本的路径，所以在使用别名时，要确保别名路径和原本的路径都可以正常访问。

四、参数传递

在 Vue.js 中，我们可以使用 $router 对象来进行页面跳转。$router 对象是Vue Router提供的路由实例，它包含了一些常用的方法，例如push()、replace()、go()等。

4.1 通过URL传递参数

在Vue中，我们可以通过URL参数来传递参数，也可以通过路由对象的query属性来获取这些参数的值。下面是一个简单的示例：

在路由配置中，定义一个带参数的路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

这里的:id表示该路由可以接收一个参数，我们可以通过$route.params.id来获取这个参数的值。

在页面中，我们可以通过路由对象的params属性来获取参数的值，例如：

<template>
  <div>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

上面的代码中，我们通过$route.params.id来获取URL参数的值。

当然，我们也可以在代码中通过$router.push()或$router.replace()方法来动态地改变URL参数的值，例如：

// 使用 $router.push() 方法
this.$router.push({ path: '/user/123' })

// 使用 $router.replace() 方法
this.$router.replace({ path: '/user/456' })

这些方法还可以通过query属性来传递参数，例如：

// 使用 $router.push() 方法传递参数
this.$router.push({ path: '/user', query: { id: 123 } })

// 使用 $router.replace() 方法传递参数
this.$router.replace({ path: '/user', query: { id: 456 } })

在页面中，我们可以通过$route.query来获取这些参数的值，例如：

<template>
  <div>
    <p>User ID: {{ $route.query.id }}</p>
  </div>
</template>

上面的代码中，我们通过$route.query.id来获取传递的参数值。

需要注意的是，使用query传递参数时，参数会以查询字符串的形式添加到URL路径后面，例如：/user?id=123，这种方式适合传递少量的简单参数。如果需要传递复杂的数据结构，可以使用路由对象的params属性。

4.2 通过路由查询参数传递参数

在 Vue Router 中，可以使用路由查询参数来传递数据。路由查询参数是在URL中以 ? 开头的查询字符串参数。例如，/path?param1=value1&param2=value2。

路由查询参数可以通过$route.query对象来访问和操作。$route.query 是一个包含 URL 查询参数的对象。例如，如果 URL 为 /path?param1=value1&param2=value2，则可以通过 $route.query.param1 和$route.query.param2访问参数的值。

以下是使用路由查询参数传递和取参数的示例：

<!-- 带参数的链接 -->
<router-link :to="{ path: '/foo', query: { id: '123' } }">Go to Foo</router-link>

<!-- 访问参数值 -->
{{ $route.query.id }}

在这个示例中，当用户点击链接时，会跳转到 /foo 路由，并将id参数设置为 123。在目标组件中，可以通过$route.query.id访问该参数的值。

需要注意的是，路由查询参数的值始终是字符串类型，如果需要使用其他类型的值，需要手动进行类型转换。

4.3 通过 params 参数传递参数

在 Vue Router 中，可以使用路由的params参数来传递数据。params 参数是在 URL 中以 / 开头的参数。例如，/path/:id。

params 参数可以通过 $route.params 对象来访问和操作。$route.params 是一个包含路由参数的对象。例如，如果URL为 /path/123，则可以通过$route.params.id访问参数的值。

以下是使用 params 参数传递和取参数的示例：

<!-- 带参数的链接 -->
<router-link :to="{ path: '/foo/' + id }">Go to Foo</router-link>

<!-- 访问参数值 -->
{{ $route.params.id }}

在这个示例中，当用户点击链接时，会跳转到/foo/:id路由，并将 id 参数设置为传递进来的值。在目标组件中，可以通过 $route.params.id 访问该参数的值。

需要注意的是，如果定义的路由路径中包含了 params 参数，那么这些参数必须要在跳转时传递进来。而且，如果该路由被多个页面共享，那么必须确保每个页面都能正确地处理该参数。

五、页面跳转的注意事项

5.1 使用 keep-alive 组件缓存页面状态

在Vue中，可以使用 keep-alive 组件缓存页面状态。这个组件可以在组件切换时将已经创建的组件实例缓存起来，避免每次切换时都重新创建组件实例，从而提高页面切换的性能。

使用keep-alive组件非常简单，只需要在需要缓存的组件外层包裹一层keep-alive组件即可。例如：

<keep-alive>
  <router-view></router-view>
</keep-alive>

这样，在切换页面时，已经缓存的组件实例不会被销毁，而是被保留在内存中，等待下次使用。

需要注意的是，使用keep-alive组件缓存页面状态时，需要考虑到以下几点：

keep-alive 组件只能缓存被包裹的组件实例，因此对于一些不需要缓存状态的组件，需要将其放在keep-alive组件的外层。
由于组件被缓存起来，因此在组件激活时，activated 钩子函数会被调用，而在组件失活时，deactivated 钩子函数会被调用。因此需要在这两个钩子函数中处理一些状态切换的逻辑。
由于 keep-alive 组件会缓存所有被包裹的组件实例，因此在一些内存敏感的应用场景下，需要限制缓存的最大数量，避免内存占用过大。可以通过 max 属性来限制缓存的最大数量，例如：

<keep-alive :max="5">
  <router-view></router-view>
</keep-alive>

这样，最多只会缓存 5 个组件实例。

5.2 解决同一路由多次跳转不刷新组件的问题

在 Vue.js 中，当我们在同一路由之间多次跳转时，会发现组件并没有刷新，而是直接复用了之前的组件实例，这可能会导致一些数据不同步或者状态不正确的问题。

解决这个问题可以使用以下方法：

使用watch监听$route对象，当 $route 发生变化时，手动触发组件重新加载的方法，例如：this.$forceUpdate()。
在组件内部使用 beforeRouteUpdate 钩子函数，在路由切换时会触发该钩子函数，可以在该函数内部进行一些数据或状态的重置操作。
在路由配置中添加 key 属性，这个属性的作用是指定在相同路由切换时，是否强制重新渲染组件。例如：

{
  path: '/example',
  name: 'example',
  component: Example,
  key: true // 强制重新渲染组件
}

这样做的好处是可以在不同的路由之间快速切换，同时也可以避免上一个路由的状态对下一个路由造成影响。

5.3 确保路由参数的可靠性和安全性

确保路由参数的可靠性和安全性通常可以从以下几个方面入手：

参数校验：在获取到路由参数后，进行必要的校验，确保参数的合法性和完整性。可以使用第三方库如Joi等进行参数校验。
参数加密：敏感信息应该在传输时进行加密，以保证传输的安全性。可以使用一些加密算法，如对称加密算法、非对称加密算法等。
参数编码：路由参数中包含特殊字符时，应该对其进行编码，避免出现安全问题或者解析错误。常用的编码方式有 URL 编码和 Base64 编码。
路由守卫：使用路由守卫对路由进行拦截和校验，以确保路由参数的合法性和安全性。可以使用路由守卫来检查用户的权限、登录状态等。
避免敏感信息传输：尽量避免在路由参数中传输敏感信息，如用户密码、手机号等，可以通过其他方式进行传输，比如使用POST请求等。

六、总结

6.1 页面跳转和参数传递的比较和使用场景

页面跳转和参数传递是 Web 应用开发中非常基础的功能。在Vue.js中，我们可以使用 Vue Router 实现路由控制和页面跳转，同时也有多种方式实现参数的传递。

在页面跳转方面，我们可以使用router-link标签、$router.push、$router.replace、$router.go、命名路由、重定向和别名等方式。其中，router-link 标签是比较常用的，可以根据传入的参数生成相应的路由链接。而 $router.push、$router.replace、$router.go 则是通过编程的方式实现页面跳转。命名路由则是为路由起一个名称，方便在代码中进行跳转。重定向和别名可以用于简化路由的路径，提高用户体验。

在参数传递方面，我们可以使用URL参数、路由查询参数和 params 参数进行传递。其中，URL 参数和路由查询参数都可以通过 URL 来传递参数，但是URL参数对于一些敏感信息需要进行加密处理。params参数则是将参数直接绑定到路由上，需要注意参数的可靠性和安全性。

为了提高页面性能和用户体验，我们还可以使用 keep-alive 组件缓存页面状态，避免每次切换都需要重新渲染页面。在缓存页面状态时，需要注意页面状态的正确性和一致性，避免缓存造成的数据问题。

另外，还有一个常见的问题就是在同一路由多次跳转时不刷新组件的问题。可以通过在路由配置中设置key属性或者在组件中监听$route对象的变化来解决。

综上所述，不同的页面跳转和参数传递方式适用于不同的场景，需要根据具体的需求进行选择。同时，也需要注意页面性能和安全性等方面的问题，提高用户体验和应用可靠性。

6.2 Vue.js 路由的优缺点和使用建议

6.2.1 Vue.js 路由的优点

单页应用（SPA）开发：Vue.js 路由可以帮助我们快速地开发单页应用，从而提升用户体验。
优秀的组件化支持：Vue.js 路由的设计非常符合Vue.js的组件化思想，可以帮助我们更好地进行组件化开发。
丰富的功能：Vue.js 路由提供了丰富的功能，如动态路由、嵌套路由、路由参数、路由守卫等等，可以满足不同场景下的需求。
官方支持：Vue.js 路由是官方维护的插件，可以保证其稳定性和更新性。

6.2.2 Vue.js 路由的缺点

学习成本较高：Vue.js 路由提供了丰富的功能，但也带来了一定的学习成本，对于初学者来说可能需要花费一定的时间来学习。
配置复杂：在配置复杂的路由场景下，Vue.js 路由的配置可能会显得较为繁琐。
SEO 不友好：由于单页应用的特点，Vue.js 路由对 SEO 不太友好，需要通过其他手段来解决。

6.2.3 使用建议：

对于需要快速开发单页应用的场景，建议使用 Vue.js 路由。
在开发中尽量避免使用过于复杂的路由配置，保持简单易懂。
对于需要考虑 SEO 的应用场景，可以考虑使用服务端渲染（SSR）来解决SEO不友好的问题。
在使用路由时，应该注意保证路由参数的可靠性和安全性，避免出现安全漏洞。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)