Vue2.0路由动态路径的绑定

最新推荐文章于 2025-05-20 00:00:50 发布

原创最新推荐文章于 2025-05-20 00:00:50 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue2.0 #路由 #to #router-link #router-link-active

Vue2.0 专栏收录该内容

7 篇文章

订阅专栏

本文展示了一个使用Vue.js创建的导航栏示例，通过v-for循环遍历数据并利用router-link实现页面间的跳转。同时，通过router-link-active类为当前激活的链接添加样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div class="title" name="list">


<router-link :to="{ path: bar}" v-for="(bar, index) in title">
<span >
{{ bar }}
</span>
</router-link>
</div>
</template>

<script>
export default {
data () {
return {
title: [
'新歌',
'排行',
'榜单',
'歌手'
]
}
}
}
</script>

<style lang="css">
.title {
width: 100%;
float: left;
}
.title span {
cursor: pointer;
display: inline-block;
width: 20%;
margin-left: 4%;
font-size: 4vw;
text-align: center;
padding: 2% 0;
}
.router-link-active {
color: #49A4F7;
border-bottom: 2px solid #49A4F7;
}
</style>