Vue+Router+Element でシンプルなナビゲーションバーを実装する

//config.js ページ //ナビゲーション バー import Home from '../components/home'
//ホームページは '../components/index' からインデックスをインポートします
//ビデオ プラットフォームは '../components/vid_terrace' から Vid をインポートします
//他のページは '../components/rests' から Rests をインポートします
 
 
エクスポートデフォルト{
  ルート:[
    {
      パス:'/home',
      名前: 'ホーム',
      コンポーネント: ホーム、
    },
    {
      /**
       * home はナビゲーションバーを設定します。設定しないと新しいページにジャンプします * /home/index
       */
 
      パス: '/home',
      名前: 'ホーム',
      コンポーネント: ホーム、
      リダイレクト: 'インデックス',
      子供たち： [
        {
          名前: 'インデックス',
          パス: '/index',
          コンポーネント: インデックス
        },
        {
          名前: 'vid',
          パス: '/vid',
          コンポーネント: Vid
        },
        {
          名前:'休息',
          パス: '/rests',
          コンポーネント: 休符
        }
      ]
    }
  ]、
  // Vue アドレスを削除します#
  モード:'履歴'
}

「vue-router」から VueRouter をインポートします。
「vue」からVueをインポートします。
'./config' から Config をインポートします。
 
Vue.use(VueRouter);
 
ルーターを新しい VueRouter(Config) にします。
デフォルトルーターをエクスポートします。

'vue' から Vue をインポートします。
'./App' から App をインポートします。
 
 
// Element-ui をインポート
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
 
// ./router/index ファイルをインポートしますimport router from "./router/index";
Vue.config.productionTip = false
Vue.js の ElementUI 要素をオーバーライドします。
新しいVue({
 
  el: '#app',
  レンダリング: h => h(App),
  ルーター
})

<テンプレート>
  <div id="アプリ">
    <!-- コンポーネントは、レンダリング パスに一致するビュー コンポーネントをレンダリングする機能コンポーネントです。 -->
      <ルータービュー></ルータービュー>
  </div>
 
</テンプレート>
 
<スクリプト>
 
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
   
  }
}
</スクリプト>
 
<スタイル>
＃アプリ {
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

<テンプレート>
<!-- ナビゲーション バー -->
  <div>
    <el-メニュー
        :default-active="this.$route.path"
        クラス="el-menu-demo"
        モード="水平"
        @select="ハンドル選択"
        ルーター
        背景色="#545c64"
        テキストカラー="#fff"
        アクティブテキストカラー="#ffd04b">
 
      <el-menu-item v-for="(tit,i) in titleList" :key="i" :index="tit.name">
        <テンプレート>{{ tit.navItem }}</テンプレート>
      </el-menu-item>
 
    </el-menu>
 
    <el-main class="詳細なコンテンツ">
      <ルータービュー />
    </el-main>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 
    データ（） {
      戻る {
        アクティブインデックス: '1',
        アクティブインデックス2: '1'、
        タイトルリスト:[
          {name:'index', navItem:'ホームページ'},
          {name:'vid',navItem:'ビデオ プラットフォーム'},
          {name:'rests',navItem:'others'},
        ]
 
      }
    },
    メソッド: {
      ハンドル選択(キー、キーパス) {
        console.log(キー、キーパス);
      }
    }
  }
</スクリプト>
 
<スタイルスコープ>
 
</スタイル>