使用 vue 路由,寫一個選項(xiàng)卡

• 選項(xiàng)卡，這個每個網(wǎng)頁都會有的一個計(jì)數(shù),現(xiàn)在我將通過 react vue js 實(shí)現(xiàn)一個門戶網(wǎng)站的選項(xiàng)卡，對比著看更有意思

1. 下面是我通過 vue 實(shí)現(xiàn)門戶網(wǎng)站的選項(xiàng)卡的部分關(guān)鍵代碼

<template>
  <div class="home">
    <div class="nav">
      <div class="logo"><img src="../assets/logo.png" alt="" /></div>
      <div class="tabSelect">
        <div
          :class="currentIndex == 0 ? 'active' : null"
          @click="tabChange(0)"
          data-index="0"
        >
          <router-link to="/index">首頁</router-link>
        </div>
        <div
          :class="currentIndex == 1 ? 'active' : null"
          @click="tabChange(1)"
          data-index="1"
        >
          <router-link to="/pic">畫友圈 </router-link>
        </div>
        <div
          :class="currentIndex == 2 ? 'active' : null"
          @click="tabChange(2)"
          data-index="2"
        >
          <router-link to="/nearby">附近畫友</router-link>
        </div>
        <div
          :class="currentIndex == 3 ? 'active' : null"
          @click="tabChange(3)"
          data-index="3"
        >
          <router-link to="/country">各地畫廊</router-link>
        </div>
        <div
          :class="currentIndex == 4 ? 'active' : null"
          @click="tabChange(4)"
          data-index="4"
        >
          <router-link to="/world">全球展覽</router-link>
        </div>
        <div
          :class="currentIndex == 5 ? 'active' : null"
          @click="tabChange(5)"
          data-index="5"
        >
          <router-link to="/elec">電子圖錄</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: "Home",
  components: {},
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    tabChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

1. 下面是我通過 react 實(shí)現(xiàn)門戶網(wǎng)站的選項(xiàng)卡的部分關(guān)鍵代碼

// header組件
render() {
    return (
      <div className="contianer">
        <img src={logo} alt="" />
        <ul>
          <li>
            <Link to="/home">首頁</Link>
          </li>
          <li>
            <Link to="/pic">畫友圈</Link>
          </li>
          <li>
            <Link to="/nearby">附近畫友</Link>
          </li>
          <li>
            <Link to="/country">各地畫廊</Link>
          </li>
          <li>
            <Link to="/world">全球展覽</Link>
          </li>
          <li>
            <Link to="/elec">電子圖錄</Link>
          </li>
        </ul>
      </div>
    );
  }

// 根組件
render() {
    return (
      <div className="container">
        <BrowserRouter>
          <div className="header">
            <Headers />
          </div>
          <div className="content">
            <Redirect to="/home" />
            <Route path="/home" component={Home}></Route>
            <Route path="/pic" component={Pic}></Route>
            <Route path="/nearby" component={Nearby}></Route>
            <Route path="/country" component={Country}></Route>
            <Route path="/world" component={World}></Route>
            <Route path="/elec" component={Elec}></Route>
          </div>
          <div className="footer">
            <Footer />
          </div>
        </BrowserRouter>
      </div>
    );
  }

總結(jié)：代碼還有很多不合理的地方，和可以優(yōu)化的地方，目前只是實(shí)現(xiàn)這個功能，當(dāng)前代碼夠用了

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：看上去不錯哦