【JavaScript源代码】vue 页面跳转的实现方式.docx

vue 页面跳转的实现方式 　　一、this.$router.push()　　<template>　　  <div id='test'>　　    <button @click='goTo()'>点击跳转4</button>　　  </div>　　</template>　　//跳转前页面传参数：　　goTo(item) {　　  //storageData中数据用于跳转到下一个页面之后，进行返回时能够返回到跳转之前的页面　　  let storageData = {　　    searchWords: this.keyWord,　　    pageSize: this.paging.pageS Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中，页面间的跳转是通过其内置的 Vue Router 库来实现的。Vue Router 提供了两种主要的导航方法：`this.$router.push()` 和使用 `router-link` 组件。 **一、this.$router.push() 方法** `this.$router.push()` 是 Vue Router 提供的一个实例方法，用于向当前路由的历史记录中添加一个新的记录，从而导致浏览器的前进/后退按钮激活。在示例中，`goTo()` 函数展示了如何使用 `this.$router.push()` 进行页面跳转并传递参数： ```javascript goTo(item) { let storageData = { searchWords: this.keyWord, pageSize: this.paging.pageSize, pageNo: this.paging.currentPage }; let data = { type: item.srcType, tableName: item.tableName, name: item.datasourceName, tableId: item.tableId, id: item.datasourceId }; this.$router.push({ name: 'onlineSearch', query: { targetData: data, storageData, page: 'search', isBackSelect: true, goBackName: 'dataSearch' } }); } ``` 在跳转后的页面，可以通过 `this.$route.query` 访问这些参数，例如： ```javascript mounted() { console.log(this.$route.query.targetData); } ``` 此外，`goBackSheet()` 函数展示了如何根据参数进行返回操作，保持数据的连续性。 **二、router-link 组件** `router-link` 是 Vue Router 提供的组件，用于创建可点击的链接，它可以处理页面的跳转。有两种主要的属性：`params` 和 `query`。 1. **params**: 当使用命名路由时，`params` 用于传递数据，这些数据不会显示在 URL 地址栏里，刷新页面后，params 数据会丢失。 示例： ```html <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> ``` 2. **query**: 使用 `query` 属性时，数据将以查询字符串的形式附加到 URL，因此它会在地址栏可见，并且刷新页面后仍会保留。 示例： ```html <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link> ``` 同时，Vue Router 还提供了 `watch` 对象，可以监听 `$route` 的变化，例如在页面刷新时执行特定操作： ```javascript watch: { $route(to, from) { // 刷新页面 this.$router.go(1); } } ``` 在实际开发中，开发者可以根据需求选择合适的方式来实现页面跳转，确保用户体验和数据的完整性和持久性。`this.$router.push()` 适用于更复杂的跳转场景，而 `router-link` 组件则在简单的导航链接中更为方便。了解和掌握这两种方法是 Vue.js 开发者必备的技能之一。