一遍文章搞懂Vue.js中的各种页面跳转方式和参数传递
文章目录
-
- 一、介绍
-
- 1.1 Vue.js 是什么，它的路由系统是如何工作的
- 二、路由基础
-
- 2.1 Vue.js 路由的概念和基本配置
- 2.2 路由表的使用方法
- 三、页面跳转
-
- 3.1 使用 $router.push() 进行页面跳转
- 3.2 使用 $router.replace() 进行页面跳转
- 3.3 使用 $router.go() 进行页面跳转
- 3.4 使用命名路由进行页面跳转
- 3.5 使用命名视图进行页面跳转
- 3.6 使用重定向进行页面跳转
-
- 3.6.1 通过redirect属性来实现重定向
- 3.6.2 通过alias属性来实现重定向
- 3.7 使用别名进行页面跳转
- 四、参数传递
-
- 4.1 通过URL传递参数
- 4.2 通过路由查询参数传递参数
- 4.3 通过 params 参数传递参数
- 五、页面跳转的注意事项
-
- 5.1 使用 keep-alive 组件缓存页面状态
- 5.2 解决同一路由多次跳转不刷新组件的问题
- 5.3 确保路由参数的可靠性和安全性
- 六、总结
-
- 6.1 页面跳转和参数传递的比较和使用场景
- 6.2 Vue.js 路由的优缺点和使用建议
-
- 6.2.1 Vue.js 路由的优点
- 6.2.2 Vue.js 路由的缺点
- 6.2.3 使用建议：
一、介绍
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 :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.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>
在上面的示例中， name 属性，分别为 header、default 和 footer，表示三个不同的命名视图。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¶m2=value2。
路由查询参数可以通过$route.query对象来访问和操作。$route.query 是一个包含 URL 查询参数的对象。例如，如果 URL 为 /path?param1=value1¶m2=value2，则可以通过 $route.query.param1 和$route.query.param2访问参数的值。
以下是使用路由查询参数传递和取参数的示例：
<router-link :to="{ path: '/foo', query: { id: '123' } }">Go to Foorouter-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 Foorouter-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不友好的问题。 - 在使用路由时，应该注意保证路由参数的可靠性和安全性，避免出现安全漏洞。