深入解析 Vue Router 与钩子函数：从核心原理到最佳实践

一、Vue Router 核心对象：$router 与 $route

1. $router 的核心作用

• 路由跳转

  • push(path)：导航到新页面并保留历史记录（如 this.$router.push('/user/1')）。
  • replace(path)：替换当前页面（无历史记录），适用于登录后跳转回原页面。

// Vue 3 组合式 API 示例
import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ name: 'Home' });

• 路由参数访问

  • 动态参数：$route.params.id（对应路由 /user/:id）。
  • 查询参数：$route.query.page（对应 URL /list?page=2）。
• 编程式导航

// 根据条件动态跳转
if (user.isAdmin) {
  this.$router.push('/admin');
} else {
  this.$router.push('/dashboard');
}

(1) 路由跳转

• 通过$router.push方法实现页面的跳转。例如，this.$router.push('/home')会将页面导航到路径为/home的路由对应的组件。

• 也可以使用$router.replace方法进行替换式跳转，它不会在历史记录中添加新的记录，而是替换当前的记录。

(2) 访问路由参数

• 可以通过$router.params来获取路由参数。例如，在路由配置中定义了/user/:id，那么在组件中可以通过this.$router.params.id获取到具体的用户 ID。

(3) 路由编程式导航

• 配合$route对象，可以根据不同的条件进行动态的路由导航。例如，根据用户的登录状态，决定导航到不同的页面。

(4)路由钩子函数

• $router提供了一些钩子函数，如beforeEach、afterEach等。可以在这些钩子函数中进行全局的路由守卫和状态管理。例如，在beforeEach钩子中进行用户权限验证，判断用户是否有权限访问某个路由。

 

2. $route 与 $router 的区别

对象	用途	示例
$router	路由实例（控制跳转、守卫逻辑）。	this.$router.push('/login')
$route	当前路由信息（参数、路径、元数据）。	this.$route.params.id

二、国际化（i18n）：$t 函数详解

1. 核心功能

• 多语言文本映射：根据当前语言配置返回对应翻译。

// 翻译文件示例（zh-CN.js）
export default {
  welcome: '欢迎来到应用',
  button: { submit: '提交' }
};
// 组件中使用
<h1>{
  { $t('welcome') }}</h1>
<button>{
  { $t('button.submit') }}</button>

2. 进阶配置

• 动态语言切换： 

// Vue I18n 配置
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
  loc