标签: routerlink

[routerLink]和之间有什么区别routerLink？你应该如何使用每一个？

我的页面目前有Navigation.vue组件.我想让每个导航悬停并激活."悬停"有效,但"有效"则无效.

这是Navigation.vue文件的样子:

<template>
    <div>
        <nav class="navbar navbar-expand-lg fixed-top row">

                    <router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
        </nav>
    </div>
</template>

以下是风格.

<style>

   nav li:hover,
   nav li:active{
      background-color: indianred;
      cursor: pointer;
    }

</style>

这就是现在悬停的样子,并且在活动时预期完全相同.

如果你给我一个关于样式路由器链接活动作品的建议,我将不胜感激.谢谢.

https://angular.io/api/router/RouterLink很好地概述了如何创建链接,将用户带到Angular4中的不同路径,但是我找不到如何以编程方式执行相同的操作而不需要用户单击链接

我的routerLinkActive有问题.

这是两个GIF解释.

1. 第一个问题:当我启动应用程序时,routerLinkActive都没有激活该类.但如果我点击不同的路线,那最终会有效.

2. 当我首先点击当前路线时,不显示该类.

这是我的代码:

<ul class="nav">
   <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
       <a [routerLink]="[menuItem.path]">
           <i class="material-icons">{{menuItem.icon}}</i>
           <p>{{menuItem.title}}</p>
       </a>
   </li>
</ul>

这是我路线的树.(红色称为组件)

和我的路线代码:

import ...

const routes : Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      }, ..., {
        path: 'challenges',
        component: ImageRankComponent
      }, {
        path: 'niveau',
        component: LevelComponent
      }, {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [
    {
      provide: LocationStrategy,
      useClass: …

我有一个使用 vue 创建的单页应用程序，导航链接都是使用router-link标签完成的。导航中有几个项目我的老板希望在导航中包含但已禁用，以便人们可以一瞥即将推出的一些功能。但是我不知道如何完全禁用路由器链接！

preventDefault什么都不@click.native.prevent="stopClick()"做，什么都不做（我尝试将它发送到一个函数以查看是否会阻止点击，但尽管阻止，它仍然只是调用该函数和路由），添加一个disabled类并设置一个pointer-events: none;什么都不做的 css 规则。我不知道还有什么可以尝试的，这是使禁用的链接成为普通文本而不是路由器链接的唯一方法吗？

我试图在我的 routerLink 中传递一个 id，我怎么能连接它？

<a routerLink="['/details', {{data.id}}]"> </a> doesnt work.

你有解决方案吗？

提前致谢

我写了一个名为"Customer"的模块,它有几个组件,如login,home和register.现在我创建了一个共享模块,它也有两个组件,如页眉和页脚.由于页眉和页脚将由客户模块中的所有组件共享,因此我将它们放在共享模块中.共享模块将导入到客户模块.

现在有一个路由器链接指向客户模块内的组件.那些路由器链接没有被解释为href.但是,如果我将这些页眉和页脚组件直接放在客户模块中,那么这些路由器链接就会得到解释.

我在下面列出了代码段.

共享模块文件

import { NgModule } from '@angular/core';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  imports: [ ],
  declarations: [ HeaderComponent, FooterComponent ],
  exports: [ HeaderComponent, FooterComponent ]
})

export class SharedModule { }

客户模块文件

import { NgModule } from '@angular/core';

import { SharedModule } from './shared/shared.module';
import { CustomerRoutingModule } from './customer-routing.module';

import { CustomerComponent } from './customer.component';
import { CustomerHomeComponent } from './home/home.component';
import { CustomerLoginComponent } from './login/login.component';
import …

我正在尝试使用一个组件链接组件 routerLink = "selected"

 const routes: Routes = [
      {
        path: '',
        children: [
          {
            path: 'account',
            component: AccountComponent,
            children: [
              {
                path: 'selected',
                component: SelectedComponent,
              },
            ],
          },

        ]
      }
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class AccountSettingsRoutingModule { }

这是AccountComponent

    import { Component, OnInit, AfterViewInit } from '@angular/core';
    import { Router, ActivatedRoute, RouterModule } from '@angular/router';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Http, Response, Headers } from '@angular/http';
    @Component({
      selector: 'app-list-accounts',
      templateUrl: './accounts-list.component.html', …

我已经在routingModule 和所有路径中启用了anchorScrolling，但是当我点击链接时什么也没发生。

'导航栏.component.html'

<div id="mySidenav" class="sidenav" #sidenav>
   <a href="javascript:void(0)" class="closeBtn" 
   (click)="closeNav()">&times;</a>
   <a routerLink="/hazyMinds" [fragment]="'HazyMinds'">HazyMinds</a>
   <a routerLink="/ourGames" [fragment]="'Games'">Our Games</a>
   <a routerLink="/contact" [fragment]="'Contact'">Contact</a>
</div>
<span id="openNavBtn"  (click)="openNav()" #openBtn>&#9776;</span>

'app.component.html'

<app-nav-bar></app-nav-bar>
<app-hazy-minds id="HazyMinds"></app-hazy-minds>
<app-games id="Games" ></app-games>
<app-contact id="Contact"></app-contact>
<router-outlet></router-outlet>

'app-routing.module.ts'

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import {ContactComponent} from './contact/contact.component';
import {GamesComponent} from './games/games.component';
import {HazyMindsComponent} from './hazy-minds/hazy-minds.component';

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: …

这可能很简单，但是我查看了文档，但找不到任何东西。我想将我的“ github”链接重定向为github.com。但是，它只是将“ https://github.com ” 附加到我的URL而不是跟随链接。这是一个片段：

 <BreadcrumbItem to='https://github.com'>
    <Icon type="social-github"></Icon>
 </BreadcrumbItem>

（这将iView用于自定义CSS，但“ to”的工作方式与router-link相同）。

最终发生的事情是这样的：