实现简易导航条

日常学习日志（二）

• <router-link>
• redirect 设置根路径指向的默认路由
• router-link-active
• 制作简易navbar

---

1.<router-link> 用作路由跳转，可以看做是任意html标签

to 属性：指向要跳转到的路由
tag 属性 ： 把<router-link>当做html中的哪个标签

2.redirect

redirect 可以重新定义路径指向的路由

routers：[{
     path:'/',
     redirect:'/recommand'
},
{
     path:'/',
     component:recommand
}
]

3.class 样式—router-link-active

当路由为选中状态时动态添加该样式

综合示例 —-实现简易navbar

<template>
    <div class="tab">
        <router-link tag="div" to="/recommand" class="tab_item">
            <span>
                推荐
            </span>
        </router-link>
        <router-link tag="div" to="/singer" class="tab_item">
            <span>
                歌手
            </span>
        </router-link>
        <router-link tag="div" to="/rank" class="tab_item">
            <span>
                排行
            </span>
        </router-link>
        <router-link tag="div" to="/search" class="tab_item"> 
            <span>
                搜索
            </span>
        </router-link>
    </div>
</template>
<script>
    export default {
        name: 'tab',
    }
</script>
<style>
* {
    padding:0;
    margin:0;
    text-decoration: none;
    list-style: none;
}
.tab {
    display: flex;
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    font-family: "黑体";
    background-color: rgba(0,0,0,0.3);
    color: white;
}
.tab_item {
    flex: 1;
    text-align: center;
}
.router-link-active {
    background-color: rgba(0,0,0,0.2);
}
</style>