routerlink active-class

`routerLink` 是 Angular 框架中用于在路由之间导航的指令。`active-class` 则是 `routerLink` 的一个属性，用于指定当前活动路由链接所应用的CSS类。

当目标路由与当前活动路由匹配时，`active-class` 所指定的CSS类将会被添加到该路由链接的HTML元素上。这样做可以使得当前活动的链接在页面上呈现出不同的样式，以提供视觉上的反馈。

例如，我们可以在模板中使用 `routerLink` 和 `active-class` 来创建一个导航菜单，并为当前活动路由链接添加一个名为 "active" 的CSS类：

<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
  <a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>

在上述代码中，当路由为 `/home` 时，`<a>` 元素上将会添加 `active` 类；当路由为 `/about` 时，相应的 `<a>` 元素将会添加 `active` 类；以此类推。

你可以根据自己的需要自定义 `active-class` 的名称，并在CSS样式表中定义相应的样式规则。

相关问题

router4 如何注册 router-link

在Vue Router 4中，`router-link`组件已经被废弃，取而代之的是`router-view`和`router-link`被重命名为`<RouterView>`和`<RouterLink>`。你可以按照以下步骤在Vue Router 4中注册和使用`<RouterLink>`组件：

1. 首先，确保你已经安装了Vue Router，并在你的项目中引入它：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ],
});

const app = createApp(App);
app.use(router);
app.mount('#app');

2. 在你的Vue组件中，使用`<RouterLink>`标签来创建路由链接。例如：

<template>
  <div>
    <RouterLink to="/home">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </div>
</template>

3. 如果你想要给链接添加CSS类名或其他属性，可以通过`v-bind`指令来绑定属性。例如：

<template>
  <div>
    <RouterLink to="/home" class="link">Home</RouterLink>
    <RouterLink to="/about" :class="{ active: isActive }">About</RouterLink>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
    };
  },
};
</script>

以上就是在Vue Router 4中注册和使用`<RouterLink>`组件的方法。请注意，你需要将`<RouterLink>`标签包装在Vue组件的模板中，并根据需要设置路由链接的属性和样式。

sidebar-nav如何添加国际化

在 Angular 中实现侧边栏导航（`sidebar-nav`）的国际化，可以基于 Angular 的内置国际化模块 `@angular/localize` 和第三方库 `@ngx-translate/core` 实现。具体步骤如下：

1. 安装 `@ngx-translate/core` 依赖：

npm install @ngx-translate/core --save

2. 在 app.module.ts 文件中导入 `TranslateModule` 模块，并将其添加到 `imports` 数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 在组件中使用 `TranslateService` 服务加载语言包，并在模板中使用 `translate` 管道进行国际化：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-sidebar-nav',
  templateUrl: './sidebar-nav.component.html'
})
export class SidebarNavComponent {
  constructor(private translateService: TranslateService) {}

  ngOnInit() {
    // 加载语言包
    this.translateService.setTranslation('en', {
      'home': 'Home',
      'dashboard': 'Dashboard',
      'settings': 'Settings'
    }, true);
    this.translateService.setTranslation('zh-CN', {
      'home': '首页',
      'dashboard': '仪表盘',
      'settings': '设置'
    }, true);

    // 设置默认语言
    this.translateService.setDefaultLang('en');
  }
}

在 `ngOnInit()` 生命周期钩子函数中，我们使用 `setTranslation()` 函数加载语言包，并使用 `setDefaultLang()` 函数设置默认语言为英语。语言包中，键名为英文，键值为对应的翻译文本。

4. 在模板中使用 `translate` 管道进行国际化：

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" routerLink="/" routerLinkActive="active" translate>home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/dashboard" routerLinkActive="active" translate>dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/settings" routerLinkActive="active" translate>settings</a>
  </li>
</ul>

在模板中，我们使用 `translate` 管道将需要国际化的文本进行翻译。管道的参数就是语言包中对应的键名。

5. 切换语言环境：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-switch',
  templateUrl: './language-switch.component.html'
})
export class LanguageSwitchComponent {
  constructor(private translateService: TranslateService) {}

  switchLanguage(lang: string) {
    this.translateService.use(lang);
  }
}

在组件中，我们使用 `use()` 函数切换语言环境。参数为语言环境代码。

这样，我们就可以实现 Angular 中侧边栏导航的国际化。