【vue】导航栏封装

• Z时代
• 2024-01-10
• 分类：综合

<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>

在首页中注册并使用

以上是 【vue】导航栏封装 的全部内容， 来源链接： utcz.com/z/376804.html