vue-routerインスタンスの詳しい説明

最近、vue を使用して会社のプロジェクトを作成しました。vue-cli を使用して構築されました。これは中規模および大規模なプロジェクトと考えられます。記録して共有したいと思います。知識ポイントはここにあります。皆さんのお役に立てれば幸いです。役に立ちました。今後徐々に共有していきます。早速、コードに進みましょう。 ！

main.js

// `import` コマンドでロードする Vue ビルド バージョン
// (ランタイム専用またはスタンドアロン) はエイリアスを使用して webpack.base.conf に設定されています。
「vue」から Vue をインポートします
「./App」からアプリをインポート
「./router」からルーターをインポートします
'./assets/css/common.css' をインポートします

Vue.config.productionTip = false

/* eslint-disable no-new */
newVue({
  el: '#app',
  ルーター、
  テンプレート： ''、
  コンポーネント: {アプリ}
})

ルーターフォルダーの

#index.js

#「vue」から Vue をインポート 「vue-router」からルーターをインポートします import home from '../components/home' //ここでは 2 つの書き込み方法を選択できます。1 つはここに書き込む方法、もう 1 つはコンポーネントに書き込む方法です。以下のコードを参照してください~ Vue.use(ルーター) デフォルトの新しいルーターをエクスポート({ モード:'履歴', ルート: [ { パス： '/'、 コンポーネント:ホーム }、 { パス:'/pagevue', コンポーネント:pagevue => require(['../components/childCom/pagevue.vue'], pagevue), }、 { パス:'/nextpagevue', コンポーネント:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue), } 】 })

home.vue

私はホームページです

クリックして次のルートに入ります

テンプレート> デフォルトをエクスポート{ データ（）{ 戻る{ } }、 メソッド:{ clickMe(){ this.$router.push({path:'/pagevue'}) } } } スクリプト>

pagevue.vue

私はサブページです

クリックして次のルートに進みます

テンプレート> デフォルトをエクスポート{ メソッド:{ 帰宅（）{ this.$router.push({path:'/nextpagevue'}) } } } スクリプト>

nextpagevue.vue

 
 <div class="homeMain">
 <div>私は別のサブページです</div>
 <div class="routerName">クリックしてホームページに戻ります</div>
 </div>
 テンプレート>
 
 デフォルトをエクスポート{
 メソッド:{
 clickGohome(){
 this.$router.push({パス:'/'})
 }
 }
 }
 スクリプト>

common.css

* {
  マージン: 0;
  パディング: 0; }
.homeMain {
  テキスト整列: 中央;
  マージントップ: 100px; }
  .homeMain .routerName {
    色: #1eb89c;
    ボーダー: 1px ソリッド #1eb89c;
    マージントップ: 20px; }

/*#sourceMappingURL=common.css.map */

以上がvue-routerインスタンスの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。