Vue Router? ???? ?? ??? ?? ???? ??? ??????

Vue Router? ????? ???? Vue.js? ??? ?? ??????, ?????? ???? ???? ???? ??? ??? ?????. ?? ??????? ????? ??? ??? ??? ?? ???? ???? ??? ???? ?? ??? ????. ? ???? Vue Router? ???? ??? ?? ??? ?? ???? ??? ?????.

?? Vue Router ????? ???? ???. npm ?? Yarn ??? ???? ??? ? ????:

npm install vue-router

??

yarn add vue-router

??? ??? ? ????? ?? ????? ??? ??? ???? ?? ??? index.js ??? ???? ??? ?? ??? ?????. ??. index.js ???? Vue ? Vue Router? ???? ??? Vue Router ????? ???? ???.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

export default router

???? Vue ?? ???? <router-link> ?? ??? ???? ?? ??? ??? <code><router-view> ?? ??? ???? ?? ?? ??? ?????. ?? ???? ?? ?? ??? ?? ? ????. <router-link>組件來創(chuàng)建導(dǎo)航鏈接，而使用<router-view>組件來顯示對(duì)應(yīng)的組件。在此基礎(chǔ)上，我們可以實(shí)現(xiàn)標(biāo)簽頁的切換效果。

首先，我們創(chuàng)建一個(gè)<TabBar>組件作為導(dǎo)航欄，用于顯示標(biāo)簽頁：

<template>
  <div>
    <router-link 
      v-for="tab in tabs"
      :key="tab.name"
      :to="tab.to"
      active-class="active"
      class="tab-item"
    >
      {{tab.title}}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '首頁', to: '/' },
        { title: '新聞', to: '/news' },
        { title: '關(guān)于', to: '/about' }
      ]
    }
  }
}
</script>

<style scoped>
.tab-item {
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.active {
  background-color: #eee;
}
</style>

然后，在我們的路由配置文件index.js中，我們可以配置對(duì)應(yīng)的路由，并將它們與組件關(guān)聯(lián)起來。我們可以為每個(gè)導(dǎo)航鏈接設(shè)置一個(gè)唯一的name，并將其路由路徑與對(duì)應(yīng)的組件關(guān)聯(lián)起來：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/news',
      name: 'News',
      component: () => import('@/views/News.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
})

export default router

最后，在我們的根組件App.vue中，我們可以使用<router-view>組件來顯示對(duì)應(yīng)的組件，并在導(dǎo)航欄中使用<TabBar>組件來實(shí)現(xiàn)標(biāo)簽頁的切換效果：

<template>
  <div id="app">
    <tab-bar></tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'

export default {
  components: {
    TabBar
  }
}
</script>

通過以上配置，我們可以在Vue應(yīng)用中實(shí)現(xiàn)類似標(biāo)簽頁的效果。當(dāng)我們點(diǎn)擊導(dǎo)航鏈接時(shí)，Vue Router會(huì)根據(jù)路由配置找到對(duì)應(yīng)的組件，并在<router-view>

?? ?? ???? ?? ?? ???? <TabBar> ?? ??? ????.

rrreee

?? ?? ??? ?? ?? index.js?? ?? ??? ???? ??? ? ????. ?? ??? ??. ? ?? ??? ??? ??? ???? ?? ??? ??? ?? ?? ??? ??? ? ????. ??rrreee??????? ?? ?? ?? App.vue?? <router-view> ?? ??? ??? ? ????. ?? ?? ??? ???? ?? ??? <TabBar> ?? ??? ???? ? ?? ??? ????. ??rrreee??? ??? ?? Vue? ??? ? ????. ?? ?? ?? ?? ?? ??????. ?? ??? ???? Vue Router? ??? ??? ???? ?? ?? ??? ?? <router-view>? ?????. ????????? Vue Router? ??? ??? ???? ?? ??? ?? ?? ??? ? ????. ???? ???? ?????? Vue ???????? ???? ??? ??? ?? ??? ???? ????? ? ?? ??? ??? ??? ? ????. ??

? ??? Vue Router? ???? ?? ??? ?? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!