router-link触发生命周期

在Vue Router中，当`<router-link>`组件被点击时，会触发以下生命周期钩子函数：

1. `beforeRouteLeave`：在离开当前路由之前调用。

2. `beforeRouteUpdate`：在当前路由复用（例如，由于参数变化而导致的组件复用）时调用。

3. `beforeRouteEnter`：在进入下一个路由之前调用。

这些生命周期钩子函数可以在组件中定义，以便在路由变化时执行特定的逻辑。例如，可以在`beforeRouteLeave`钩子函数中保存表单数据，以便在用户返回此页面时恢复表单数据。

需要注意的是，当使用`<router-link>`组件进行路由跳转时，Vue Router会自动调用这些生命周期钩子函数。但是，如果直接使用`$router.push()`或`$router.replace()`进行路由跳转，这些生命周期钩子函数将不会被调用。

相关问题

router-link会触发组件的生命周期吗

是的，在Vue.js中，当使用`<router-link>`组件进行路由跳转时，会触发组件的生命周期。具体来说，当使用`<router-link>`进行路由跳转时，Vue.js会销毁当前组件实例，然后创建新的组件实例，这样就会触发新组件实例的生命周期钩子函数。

例如，在以下代码中，当用户点击`<router-link>`标签时，Vue.js会销毁`MyComponent`组件实例，然后创建新的`MyComponent`组件实例，这样就会触发新组件实例的`created`、`mounted`等生命周期钩子函数：

<template>
  <div>
    <router-link to="/other-component">Go to other component</router-link>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  created () {
    console.log('MyComponent created')
  },
  mounted () {
    console.log('MyComponent mounted')
  }
}
</script>

需要注意的是，当组件使用`<keep-alive>`标签进行缓存时，组件实例不会被销毁，因此在使用`<keep-alive>`标签时，`<router-link>`组件不会触发组件的生命周期。

vue-router传参方式

Vue Router 有多种传参方式：

1. 路由参数（动态路由）：在路由定义中使用冒号来声明一个参数，例如 `/user/:id`，然后在组件中通过 `$route.params.id` 来获取参数值。

2. 查询参数（Query）：在路由链接中使用查询参数，例如 `/user?id=123`，然后在组件中通过 `$route.query.id` 来获取参数值。

3. 命名路由参数：在路由定义中使用 `name` 来给路由命名，例如 `{ path: '/user/:id', name: 'user' }`，然后在组件中通过 `$route.params.id` 或 `$route.params['id']` 来获取参数值。

4. 局部状态：在组件中定义局部状态，例如 `data()` 中的属性，然后在路由钩子函数中传递参数，例如 `beforeRouteEnter(to, from, next) { next(vm => vm.setData(to.params.id)) }`。

5. 跳转时传参：在 `router-link` 中使用 `to` 属性来跳转并传递参数，例如 `<router-link :to="{ name: 'user', params: { id: 123 } }">`。

6. 编程式导航时传参：在调用 `router.push()` 或 `router.replace()` 时传递参数，例如 `router.push({ name: 'user', params: { id: 123 } })`。

需要注意的是，对于路由参数和查询参数，当参数发生变化时，组件不会重新渲染，需要使用 `watch` 或 `beforeRouteUpdate` 生命周期来监听参数变化。而对于局部状态、跳转时传参和编程式导航时传参，每次参数变化都会触发组件的重新渲染。