Vue ルーター vue-router 詳細説明ガイド

<テンプレート>
    <div>
        <h1>ページ1</h1>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                メッセージ: 「私はページ1コンポーネントです」
            }
        }
    }
</スクリプト>

<テンプレート>
    <div>
        <h1>ページ2</h1>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                メッセージ: 「私はページ2のコンポーネントです」
            }
        }
    }
</スクリプト>

//Vue の紹介
'vue' から Vue をインポートします。
//vue-routerを導入する
'vue-router' から VueRouter をインポートします。
//サードパーティのライブラリは、使用する前に使用する必要があります Vue.use(VueRouter)
//参照ページ1 import page1 from './page1.vue';
//page2 を参照 import page2 from './page2.vue';

//ルートのコレクションを定義します。配列型 constroutes=[
    //単一ルートはすべてオブジェクト型で、パスはパスを表し、コンポーネントはコンポーネントを表します {path:'/page1',component:page1},
    {パス:"/page2",コンポーネント:page2}
]

//VueRouter をインスタンス化してルートを追加します const router = new VueRouter({
//ES6 の略語、ルートと同じ: ルート
    ルート
});

// このインスタンス オブジェクトをスローして、外部からの読み取りとアクセスを容易にし、デフォルト ルータをエクスポートします。

'vue' から Vue をインポートします
'./App' から App をインポートします
// router.js を参照
'./router.js' からルーターをインポートします。
Vue.config.productionTip = false

/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
//vueルーターのインスタンスオブジェクトに注入する必要があります。
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <div>
//Router-link はページのクリックトリガー部分を定義します <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">ページ2</router-link>
    </div>
//router-view はページの表示部分を定義します <router-view></router-view>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

'vue' から Vue をインポートします。
'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
'./page1.vue' から page1 をインポートします。
'./page2.vue' から page2 をインポートします。
'./user.vue' からユーザーをインポートします。

定数ルート = [
    {パス:'/page1',コンポーネント:page1},
    {パス:"/page2",コンポーネント:page2},
    // リダイレクトを設定できます {path:'',redirect:"page1"}
    //または、空のパスでルートを書き換えます {path:"",component:page1}
]

const ルーター = 新しい VueRouter({
    ルート
});

デフォルトルーターをエクスポートする

<テンプレート>
    <div>
        <h1>ユーザー</h1>
       //ここでは、$route.params.name を通じてルート パラメータを取得できます<p>ようこそ、{{$route.params.name}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                メッセージ: 「私はページ1コンポーネントです」
            }
        }
    }
</スクリプト>

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">ページ1</router-link>
      <router-link to="/page2">ページ2</router-link>
    </div>

// 2 つの router-link タグを追加します <div>
      <router-link to="/user/xianyu">ダイナミックルーティング Xianyu</router-link>
      <router-link to="/user/mengxiang">ダイナミックルーティングの夢</router-link>
    </div>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

'vue' から Vue をインポートします。
'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
'./page1.vue' から page1 をインポートします。
'./page2.vue' から page2 をインポートします。
'./user.vue' からユーザーをインポートします。

定数ルート = [
    {パス:'/page1',コンポーネント:page1},
    {パス:"/page2",コンポーネント:page2},
    // {パス:'',リダイレクト:"ページ1"}
    {パス:"",コンポーネント:ページ1},
 //コロン記号を使用します。一致すると、パラメータ値は this.$route.params {path:"/user/:name",component:user} に設定されます。
    
]

const ルーター = 新しい VueRouter({
    ルート
});

デフォルトルーターをエクスポートする

<テンプレート>
    <div>
        <h1>ユーザー</h1>
        <p>おかえりなさい、{{msg}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                // メッセージ: "私はページ 1 コンポーネントです"
                メッセージ:""
            }
        },
        時計：{
//to はこれから入力するコンポーネントを示し、from はどのコンポーネントから来たのかを示します。$route(to,from){
                this.msg=to.params.name; 
                コンソールログ(111);
            }
        }
    }
</スクリプト>

<テンプレート>
    <div>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                メッセージ: 「ネストされたモバイル コンポーネント」
            }
        }
    }
</スクリプト>

<テンプレート>
    <div>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                メッセージ: 「ネストされたコンピュータ コンポーネント」
            }
        }
    }
</スクリプト>

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">ページ1</router-link>
    </div>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

'vue' から Vue をインポートします。
'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
'./page1.vue' から page1 をインポートします。
'./page2.vue' から page2 をインポートします。
'./user.vue' からユーザーをインポートします。
'./phone.vue' から電話をインポートします。
'./computer.vue' からコンピュータをインポートします。

定数ルート = [
    {
        パス:'/page1',
        コンポーネント:ページ1、
        子供たち： [
            {
                パス: "電話",
                コンポーネント: 電話
            },
            {
                パス: "コンピュータ",
                コンポーネント: コンピュータ
            },
        ]
    },
    // {パス:"/page2",コンポーネント:page2},
    // // {パス:'',リダイレクト:"ページ1"}
    // {パス:"",コンポーネント:ページ1},
    // {パス:"/user/:name",コンポーネント:user}
    
]

const ルーター = 新しい VueRouter({
    ルート
});

デフォルトルーターをエクスポートする

// userという名前のルートにジャンプし、パラメータuserIdを渡します
<router-link :to="{ name: 'user', params: { userId: 123 }}">ユーザー</router-link>

router.push({ name: 'user', params: { userId: 123 }})

router.push({ パス: '/user/:userId', パラメータ: { userId: 123 }})

router.push({ name: 'user', params: { userId: 123 }})