vue携帯端末下部ナビゲーションバー

ビジネスロジック:プロジェクトの複数のページは下部ナビゲーションバーを使用する必要があるため、抽出し、コンポーネントで親コンポーネントを導入します.
方法1
更新(2019年5月6日)、下部ナビゲーションバーのアプリケーションについては、サブコンポーネントと親コンポーネントの関係でバインドすることもできます.まず親コンポーネントファイルを追加しますmain.vue

import navBar from '@/components/common/nav.vue'

export default {
  components: {
    navBar
  }
}

親コンポーネントmain.vueで使用するサブアセンブリnavBar.vue,メニュー点灯効果については,主にルーティングのジャンプによってactive-classをバインドする.

ルートjs

import Vue from 'vue'
import Router from 'vue-router'
import NavBar from '../components/common/NavBar'//   

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/fortuneCenter/nav_bar', name: 'NavBar', component: NavBar },
  ]
})

ページ