vue中列表页面跳转打开新页面，关闭新页面并刷新列表页面

**Vue 中列表页面跳转打开新页面、关闭新页面并刷新列表页面**

在 Vue 应用中，经常需要实现列表页面的跳转功能，例如从列表页跳转到详情页，然后再返回列表页。这种场景下，我们需要实现两个关键点：1. 在跳转到新页面时，打开新页面而不关闭当前页面；2. 当用户在新页面中进行操作后，关闭新页面并刷新列表页面。

**第一步：实现跳转到新页面**

首先，我们需要定义一个方法来跳转到新页面。我们可以使用 Vue Router 来实现这个功能。在这里，我们假设你已经安装了 Vue Router 并配置好了路由。

javascript// methods.jsexport default {
 // ...
 toDetail(id) {
 this.$router.push({ name: 'detail', params: { id } });
 },
};

在上面的代码中，我们定义了一个 `toDetail` 方法，它会跳转到名为 "detail" 的路由，并传递 `id` 作为参数。

**第二步：实现关闭新页面并刷新列表页面**

当用户在新页面中进行操作后，需要关闭新页面并刷新列表页面。我们可以使用 Vue Router 的回调函数来实现这个功能。在这里，我们假设你已经定义了一个名为 "list" 的路由。

javascript// methods.jsexport default {
 // ...
 closeDetail() {
 this.$router.push({ name: 'list' });
 },
};

在上面的代码中，我们定义了一个 `closeDetail` 方法，它会跳转到名为 "list" 的路由。这样就可以关闭新页面并刷新列表页面。

**第三步：实现打开新页面而不关闭当前页面**

为了实现打开新页面而不关闭当前页面，我们需要使用 Vue Router 的 `push` 方法来跳转到新页面，而不是使用 `replace` 方法。在这里，我们假设你已经定义了一个名为 "detail" 的路由。

javascript// methods.jsexport default {
 // ...
 toDetail(id) {
 this.$router.push({ name: 'detail', params: { id } });
 },
};

在上面的代码中，我们使用 `push` 方法来跳转到新页面，而不是使用 `replace` 方法。这就可以实现打开新页面而不关闭当前页面。

**第四步：实现关闭新页面并刷新列表页面**

当用户在新页面中进行操作后，需要关闭新页面并刷新列表页面。我们可以使用 Vue Router 的回调函数来实现这个功能。在这里，我们假设你已经定义了一个名为 "list" 的路由。

javascript// methods.jsexport default {
 // ...
 closeDetail() {
 this.$router.push({ name: 'list' });
 },
};

在上面的代码中，我们使用 `push` 方法来跳转到列表页面，这样就可以关闭新页面并刷新列表页面。

**总结**

通过以上步骤，我们实现了 Vue 中列表页面的跳转功能，包括打开新页面而不关闭当前页面和关闭新页面并刷新列表页面。这种场景下，我们需要使用 Vue Router 来实现这个功能。在这里，我们假设你已经安装了 Vue Router 并配置好了路由。

javascript// main.jsimport Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
 render: h => h(App),
}).$mount('#app');

router.beforeEach((to, from, next) => {
 // ...
});

在上面的代码中，我们使用 `beforeEach` 钩子函数来实现跳转到新页面和关闭新页面并刷新列表页面的功能。

javascript// router.jsimport Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
 routes: [
 {
 path: '/',
 name: 'list',
 component: () => import('@/views/List.vue'),
 },
 {
 path: '/detail/:id',
 name: 'detail',
 component: () => import('@/views/Detail.vue'),
 },
 ],
});

在上面的代码中，我们定义了两个路由，分别是 "list" 和 "detail"。我们使用 `beforeEach` 钩子函数来实现跳转到新页面和关闭新页面并刷新列表页面的功能。

javascript// List.vue<template>
 <!-- ... -->
</template>

<script>
export default {
 // ...
 methods: {
 toDetail(id) {
 this.$router.push({ name: 'detail', params: { id } });
 },
 },
};
</script>

在上面的代码中，我们定义了一个 `toDetail` 方法，它会跳转到名为 "detail" 的路由，并传递 `id` 作为参数。

javascript// Detail.vue<template>
 <!-- ... -->
</template>

<script>
export default {
 // ...
 methods: {
 closeDetail() {
 this.$router.push({ name: 'list' });
 },
 },
};
</script>

在上面的代码中，我们定义了一个 `closeDetail` 方法，它会跳转到名为 "list" 的路由。

通过以上步骤，我们实现了 Vue 中列表页面的跳转功能，包括打开新页面而不关闭当前页面和关闭新页面并刷新列表页面。这种场景下，我们需要使用 Vue Router 来实现这个功能。在这里，我们假设你已经安装了 Vue Router 并配置好了路由。

**参考**

* [Vue Router]( />* [Vue Router API](