<template>
<div>
<div class="menu">
<div class="container">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<router-link class="navbar-brand visible-xs" :to="{ name: 'Home' }"
><img
src="../assets/images/logo.png"
alt=""
class="img-responsive"
/>大学生心理健康中心</router-link
>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li v-for="(item, index) in nav" :key="index">
<router-link :to="{ name: item.path }" :class="[item.title==activeTitle?'active':'']">{{
item.title
}}</router-link>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="请输入查询的内容"
/>
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
</nav>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props:{
activeTitle:{
type:String
}
},
data() {
return {
nav: [
{ path: "Home", title: "首页" },
{ path: "jianjie", title: "中心简介" },
{ path: "news", title: "新闻动态" },
{ path: "xlzl", title: "心理专栏" },
{ path: "xljt", title: "心理鸡汤" },
{ path: "xlzy", title: "心理资源" },
{ path: "leaveWord", title: "留言板" },
],
};
},
};
</script>
在首页中注册并使用