Vue-cli4 ルーティング構成の詳細な理解

// これは router/index.js にあります。すべて;
'vue-router' から {createRouter、createWebHistory} をインポートします。
'../views/Home.vue' から Home をインポートします。

定数ルート = [
   //ここでルーティングを設定します。
]
// router4 では new VueRouter の代わりに createRouter を使用します。
const ルーター = createRouter({ 
  履歴: createWebHistory(process.env.BASE_URL)、
  ルート
  //ここですべてのページのルーティング構成配列ルートを導入します。
})

デフォルトルーターをエクスポートする   
//すべてのルーティング設定を含むルータオブジェクトをエクスポートします。
// グローバル使用のために main.js に挿入されます。

// これは router/index.js にあり、末尾は省略されています。
'vue-router' から {createRouter、createWebHistory} をインポートします。
'../views/Home.vue' から Home をインポートします。
'../views/About.vue' から About をインポートします。
'../views/News.vue' から News をインポートします。
//3 つのページ コントロールを導入します。
定数ルート = [
    {
        パス: '/', /* 初期 URL に対応するページを指定します*/
        名前: 'ホーム'、
        コンポーネント: ホーム /* デフォルトのホームページを指定します*/
   },
   {
        path: '/about',/* 新しいセグメントが /about*/ の場合にジャンプする URL を指定します
        名前: 'About'、
        コンポーネント: About /* About へジャンプ */
   },
   {
        パス: '/news', /* 新しいセグメントが /news*/ の場合に URL がリダイレクトされることを指定します
        名前:「ニュース」、
        コンポーネント: ニュース /* ニュースへジャンプ */
   },
]

  <router-link to="URLに追加する文字">XXX</router-link>
  //<router-link> は <a> としてレンダリングされます。
  <ルータービュー />
  //これら 2 つを組み合わせて使用​​する必要があります。

<!-- これは App.vue にあります -->
<テンプレート>
  <div id="nav">
  <!-- to 属性は URL の変更方法を指定します。 -->
  <!-- Tag 属性は、router-link タグをどの HTML 要素にレンダリングする必要があるかを指定します。 -->
    <router-link to="/" Tag="a">ホームページ</router-link> |
    <router-link to="/about" Tag="a">About ページ</router-link> |
    <router-link to="/news" Tag="a">ニュースページ</router-link> |
    <router-link to="/login" Tag="a">ログイン</router-link>
  </div>
  <ルータービュー />
</テンプレート>

定数ルート = [
  {
    パス: '/about',
    名前: 'About'、
    コンポーネント: () => import('../views/About.vue')
    //About はここで直接導入され、コンポーネントに割り当てられます。
  },
  {
    パス: '/news',
    名前:「ニュース」、
    コンポーネント: () => import("../views/News.vue")
        //About はここで直接導入され、コンポーネントに割り当てられます。
  },
  {
    パス: '/login',
    名前: 'ログイン',
    コンポーネント: () => import('../views/Login.vue')
        //About はここで直接導入され、コンポーネントに割り当てられます。
  },
]

//これは縮小された router/index.js です。
定数ルート = [
  {
    パス: '/news',
    名前:「ニュース」、
    コンポーネント: () => import("../views/News.vue"),
    子供たち： [
      {
        パス: 'NewsChild-1', 
        //サブルートの前に「/」と前のレイヤーのパスを付ける必要はありません。
        //しかし実際には分析が追加されます。
        //指定されたURLが表示された場合 /News/NewsChild-1、
        //コンポーネントに対応するページにジャンプします。
        コンポーネント: () => import("../views/NewsChild-1"),
      }
    ]
  },
]

<!-- これは News.vue です。 -->
<テンプレート>
  <h1>ニュース</h1>
  // トリガーされると、URL が /News/NewsChild-1 ずつ増加するように指定します。
  <router-link to="/News/NewsChild-1">NewsChild-1</router-link>
  <ルータービュー></ルータービュー>
</テンプレート>

//これはrouter/index.jsにあります
'vue-router' から createRouter、createWebHashHistory をインポートします。

定数ルート = [
  {
    パス： '/'、
    名前: 'ホーム'、
    コンポーネント: () => import('../views/Home.vue'),
  },
  {
  //ここでパスの値をハードコードしないでください。
    パス: '/user/:userId',
    名前: 'ユーザー',
    コンポーネント: () => import('../views/User.vue'),
  }
];

<!-- これは App.vue にあります -->
<テンプレート>
  <div id="アプリ">
    <router-link to="/">ホーム</router-link> |
    <router-link to="/about">について</router-link> |
    <!-- ここで v-bind を使用して userId データを呼び出します。 -->
    <!-- /user/ を文字列として userId に連結します -->
    <router-link v-bind:to="'/user/' + userId">ユーザー</router-link>
  </div>
  <ルータービュー />
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  データ（） {
    戻る {
    //ここでuserIdデータをbaixiaに設定します。
      ユーザーID: "baixia",
    };
  },
};
</スクリプト>

<!-- App.vue 内 (送信者) -->
<テンプレート>
  <div id="アプリ">
    <router-link v-bind:to="'/user/' + userId">ユーザー</router-link>
  </div>
  <ルータービュー />
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  データ（） {
    戻る {
      ユーザーID: "baixia",
    };
  },
};
</スクリプト>

//user.vue (レシーバー) 内
エクスポートデフォルト{
    名前:"ユーザー",
    計算: {
        ユーザーID（） {
            this.$router.params.userId を返します
// this.$router.param.userId の値、
//つまり、App.vueのルーターリンクによって渡されたuserIdが返されます。
//計算属性userID()の値として使用されます}
    }
}

エクスポートデフォルト{
    名前:"ユーザー",
        計算: {
            ユーザーID（） {
            //ここでも abc 属性を取得する必要があります。
                これを返します。$router.params.abc
           }
        }
}