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

一、介绍

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)   // 输出 1console.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组件缓存页面状态时，需要考虑到以下几点：

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

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

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

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

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

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

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

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

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

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

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

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