Vue 跳转与传参详解：router-link, $router.push, $router.replace 和 resolve...

"本文主要介绍了Vue.js中进行页面跳转的不同方法，包括使用`router-link`组件、`this.$router.push`、`this.$router.replace`以及利用`resolve`方法打开新窗口，并提供了详细的代码示例和参数传递的说明。" 在Vue.js中，页面间的跳转是应用中的常见操作，可以通过多种方式实现。以下是详细说明： 1. `router-link`组件跳转 - `router-link`是Vue Router提供的组件，用于创建链接。例如，直接写上跳转的地址： ```html <router-link to="/detail/one"> <span class="spanfour">link跳转</span> </router-link> ``` - 若要传递参数，可以这样设置： ```html <router-link :to="{path: '/detail/two', query: { id: 1, name: 'vue' }}"> </router-link> ``` - 获取参数时，可以使用`this.$route.query`来访问查询参数： ```javascript id = this.$route.query.id ``` 2. `this.$router.push`方法 - 这个方法用于在当前历史记录栈中添加新的记录并导航到指定路径。例如： ```javascript toDetail(e) { this.$router.push({ path: "/detail", query: { id: e } }); } ``` - 如果使用名称路由，可以这样做： ```javascript toDetail(e) { this.$router.push({ name: "/detail", params: { id: e } }); } ``` - 获取参数时，`params`参数不会显示在URL地址栏，而`query`参数会： ```javascript id = this.$route.params.id ``` 3. `this.$router.replace`方法 - 和`push`类似，但`replace`不会在历史记录栈中添加新记录，而是替换当前记录。例如： ```javascript toDetail(e) { this.$router.replace({ name: '/detail', params: { id: e } }); } ``` 4. `resolve`方法打开新窗口 - 在Vue Router 2.1.0之后，你可以使用`resolve`方法获取目标路由的详细信息，然后使用`window.open`打开新窗口： ```javascript toDetail(e) { const location = this.$router.resolve({ name: '/detail', params: { id: e } }); window.open(location.href, '_blank'); } ``` 这种方式适用于需要在新窗口打开链接的情况。 以上就是Vue.js中常见的页面跳转方法和参数传递的实践。在实际开发中，应根据需求选择合适的方法。注意，`params`用于在URL中不显示的参数，而`query`参数则会在URL后面以问号`?`的形式显示出来。