vue3 怎么让router.back 返回不触发 onActivated 方法

在 Vue3 中，可以通过在 `router-view` 中添加 `exclude` 属性来实现不触发 `onActivated` 方法。

具体的做法是，在需要不触发 `onActivated` 方法的组件中，在 `router-view` 标签中添加 `exclude` 属性，如下所示：

<router-view :exclude="['componentName']"></router-view>

其中，`componentName` 是需要排除的组件的名称。

通过这种方式，就可以让 `router.back` 返回不触发 `onActivated` 方法。

相关问题

vue3router.back()怎么传参

Vue Router 的 `back()` 方法主要用于回退上一跳历史记录，它本身并不支持直接传递参数。如果你想在回退操作中携带数据，通常是在每次导航之前或之后，在组件内部管理路由参数。

如果你使用的是 Vue Router 的路由守卫（如 beforeEach、beforeRouterUpdate 等），可以在这些钩子里处理参数传递。例如：

// router.js
import { useRoute } from 'vue-router';

const router = new VueRouter({
  //...
});

router.beforeEach((to, from, next) => {
  const paramsToBack = {
    key: to.params.key, // 或者你想传递的其他参数
  };
  
  localStorage.setItem('paramsForBack', JSON.stringify(paramsToBack)); // 存储参数

  next(); // 继续导航
});

router.afterEach(() => {
  if (location.hash === '#!back') {
    // 检查是否有 #!back 标签，如果有则回退并从本地存储取参数
    const storedParams = JSON.parse(localStorage.getItem('paramsForBack'));
    router.replace({ name: 'yourTargetRoute', params: storedParams });
  }
});

然后在需要的地方添加一个链接或按钮点击事件，通过 hash 可以触发回退，并附带参数：

<a href="#!/back?key={{ someValue }}">回退并传递参数</a>

当用户点击这个链接，会先将当前页面的参数存入本地，然后跳转到目标页面（在这里可能是 `yourTargetRoute`）并带上回退时的参数。

$router.back()使用方法详解

$router.back() 是 Vue Router 提供的一个方法，用于在浏览器的历史记录中后退一步。该方法不需要任何参数，直接调用即可：

// 后退一步
this.$router.back();

需要注意的是，如果当前已经是浏览器历史记录中的第一步（即已经无法后退），再调用 $router.back() 方法也不会有任何效果。

此外，$router.back() 方法与浏览器的后退按钮功能相同，会触发路由的全局前置守卫、全局解析守卫、全局后置钩子等路由钩子函数，所以在使用该方法时，需要注意相应的路由钩子函数是否会对页面产生影响。