Angular中的routerLink 跳转页面和默认路由
<p>1.创建新项目</p><p>2.创建home news newscontent 组件</p>
<p>3.找到app-rounting-moudle.ts配置路由</p>
<p> 1）引入组件</p>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)">import</span> { HomeComponent } from './home/home.component'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">import</span> { NewsComponent } from './news/news.component'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">import</span> { NewscontentComponent } from './newscontent/newscontent.component';</pre>
</div>
<p> 2）配置路由</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> routes: Routes =<span style="color: rgba(0, 0, 0, 1)"> [
{path: </span>'home'<span style="color: rgba(0, 0, 0, 1)">, component: HomeComponent},
{path: </span>'news'<span style="color: rgba(0, 0, 0, 1)">, component: NewsComponent},
{path: </span>'newscontent/:id'<span style="color: rgba(0, 0, 0, 1)">, component: NewscontentComponent},
{
path: </span>''<span style="color: rgba(0, 0, 0, 1)">,
redirectTo: </span>'/home'<span style="color: rgba(0, 0, 0, 1)">,
pathMatch: </span>'full'<span style="color: rgba(0, 0, 0, 1)">
} ];</span></pre>
</div>
<p><span style="font-size: 10pt; font-family: "Calibri"">4. <span style="font-size: 10pt; font-family: "SimSun"">找到 <span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">app.component.html <span style="font-size: 10pt; font-family: "SimSun"">根组件模板，配置 <span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">router-outlet <span style="font-size: 10pt; font-family: "SimSun"">显示动态加载的路由 </span></span></span></span></span></span></p>
<div class="cnblogs_code">
<pre><h1>
<a routerLink="/home">首页</a> <a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet></pre>
</div>
<div class="cnblogs_code">
<pre> <a routerLink="/home">首页</a> <a routerLink="/news">新闻</a></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">匹配不到路由的时候加载的组件 或者跳转的路由 {</span>
path: '**', <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">任意的路由</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> component:HomeComponent redirectTo:'home'</span>
}</pre>
</div>
<div class="page" title="Page 3">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 22pt; font-family: "Calibri"; font-weight: bold"><span style="font-size: 14px">Angular routerLinkActive </span><span style="font-size: 22pt; font-family: "SimSun""><span style="font-size: 14px">设 置 </span><span style="font-size: 22pt; font-family: "Calibri"; font-weight: bold"><span style="font-size: 14px">routerLink </span><span style="font-size: 22pt; font-family: "SimSun""><span style="font-size: 14px">默认选中路由</span> </span></span></span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre><h1>
<a routerLink="/home" routerLinkActive="active">首页</a> <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1></pre>
</div>
<p>注意将样式放在全局样式中</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.active</span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)">red</span>;
}</pre>
</div>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/10912118.html
頁:
[1]