VueRouterルーティングの詳細な説明

<テンプレート>
  <div>
    <h2>私は</h2>
    <p>私はコンテンツが大事です、へへ</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 「概要」
  }
</スクリプト>

<スタイルスコープ>

</スタイル>

<テンプレート>
  <div>
    <h2>私はホームページです</h2>
    <p>私はホームページのコンテンツです、ハハハ</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 「ホーム」
  }
</スクリプト>

<スタイルスコープ>

</スタイル>

// VueRouterオブジェクトを作成する constroutes = [
    {
        パス： ''、
        <!--ルーティングのデフォルト値-->
        // デフォルトページはホームページリダイレクトに直接ロードされます: '/home'
    },
    {
        パス: '/home',
        コンポーネント: ホーム
    },
    {
        パス: '/about',
        コンポーネント: について
    },
]

const ルーター = 新しい VueRouter({
    //ルートとコンポーネントルート間のアプリケーション関係を設定します。
    モード:"履歴",
    リンクアクティブクラス:"アクティブ"
})

<テンプレート>
  <div id="アプリ">
    <router-link to="/home">ホーム</router-link>
    <router-link to="about">について</router-link>
    <ルータービュー/>
  </div>
</テンプレート>

<テンプレート>
    <div>
        私はホームページのコンテンツです</div>
</テンプレート>

'vue-router' から VueRouter をインポートします。
'vue' から Vue をインポートします
'../components/Home' から Home をインポートします。

// 1. Vue.use(プラグイン名) 経由で Vue.use(VueRouter) プラグインをインストールします。

// 2. VueRouterオブジェクトを作成する constroutes = [
    {
        パス: '/home',
        コンポーネント: ホーム
    }
]

// 3. ルーティングとコンポーネント間のマッピング関係を構成する const router = new VueRouter({
    ルート
})

// 4. ルータオブジェクトをVueインスタンスに渡す export default router

<テンプレート>
  <div id="アプリ">
    <!-- ハイパーリンクをレンダリングします -->
    <router-link to="/home" tag="button">ホーム</router-link>
    <router-link to="/about" tag="button">について</router-link>

    <!-- 動的レンダリング コンポーネント -->
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント: {},
};
</スクリプト>

<スタイル>
</スタイル>

<router-link>: このタグはvue-routerの組み込みコンポーネントであり、最終的にはリンクをレンダリングします。<router-view>: このタグは、現在のパスに応じて、上部のタイトルナビゲーションや下部の著作権情報など、さまざまなコンポーネントWebページの他のコンテンツを動的にレンダリングします。同じ登録ルートが切り替えられると、スイッチは<router-view>によってマウントされたコンポーネントであり、他のコンテンツは変更されません。

<テンプレート>
  <div id="アプリ">
    <!-- ハイパーリンクをレンダリングします -->
    <!-- <router-link to="/home" tag="h1" replace>ホーム</router-link> -->
    <!-- <router-link to="/about" tag="h1" replace active-class>概要</router-link> -->
    <button @click="handleHome">ホーム</button>
    <button @click="handleAbout">について</button>
    <!-- 動的レンダリング コンポーネント -->
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント: {},
  方法:{
    ハンドルホーム(){
      this.$router.push('/home')
    },
    ハンドルアバウト(){
      this.$router.push('/about')
    }
  }
};
</スクリプト>

<スタイル></スタイル>

//ルーティング関連情報を構成するimport Vue from 'vue'
「vue-router」からVueRouterをインポートします。

'../components/Home' から Home をインポートします。
'../components/About' から About をインポートします
'../components/User' から User をインポートします。
// Vue.use(VueRouter) から Vue.use(plugin) までプラグインをインストールします

// VueRouterオブジェクトを作成する constroutes = [
    {
        パス： ''、
        リダイレクト: '/home'
    },
    {
        パス: '/home',
        コンポーネント: ホーム
    },
    {
        パス: '/about',
        コンポーネント: について
    }, 
    <!--これがキーコードです-->
    {
        パス: '/user/:id',
        コンポーネント: ユーザー
    },
]

const ルーター = 新しい VueRouter({
    //ルートとコンポーネントルート間のアプリケーション関係を設定します。
    モード: "履歴"、
    リンクアクティブクラス: "アクティブ"
})

// ルータオブジェクトをVueインスタンスに渡す export default router

<テンプレート>
    <div>
        <h1>私はAPPページです</h1>
        {{$route.params.id}}
    </div>
</テンプレート>

    <router-link to="/home/Geek Mouse" >ユーザー名を取得するテスト</router-link><br>

//ルーティング関連情報を構成するimport Vue from 'vue'
「vue-router」からVueRouterをインポートします。

const Home = () => import ('../components/Home')
const About = () => import ('../components/About')
const User = () => import ('../components/User')
// Vue.use(VueRouter) から Vue.use(plugin) までプラグインをインストールします

// VueRouterオブジェクトを作成する constroutes = [
    {
        パス： ''、
        リダイレクト: '/home'
    },
    {
        パス: '/home',
        コンポーネント: ホーム
    },
    {
        パス: '/about',
        コンポーネント: について
    }, {
        パス: '/user/:id',
        コンポーネント: ユーザー
    },
]

const ルーター = 新しい VueRouter({
    //ルートとコンポーネントルート間のアプリケーション関係を設定します。
    モード: "履歴"、
    リンクアクティブクラス: "アクティブ"
})

// ルータオブジェクトをVueインスタンスに渡す export default router

<テンプレート>
  <div id="about">最新ニュース</div>
</テンプレート>
<スクリプト>

</スクリプト>

<テンプレート>
  <div id="about">ニュースコンテンツ</div>
</テンプレート>
<スクリプト>

</スクリプト>

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const Message = () => import('../components/Message')
const News = () => import('../components/News')

// 1. Vue.use(プラグイン名) Vue.use(VueRouter); を通じてプラグインをインストールします。

// 2. VueRouterオブジェクトを作成する constroutes = [
    {
        パス:'/home',
        コンポーネント:ホーム、
        子供たち：[
            {
                パス:'ニュース',
                コンポーネント: ニュース
            },
            {
                パス:'メッセージ',
                コンポーネント: メッセージ
            }
        ]
    },
    {
        パス: '/home/:ユーザー名',
        コンポーネント: ホーム
    },
    
    {
        パス: '/about',
        コンポーネント: について
    }
]

// 3. ルーティングとコンポーネント間のマッピング関係を構成する const router = new VueRouter({
    ルート、
    モード: '履歴'、
    // リンクアクティブクラス: 'アクティブ'
})

// 4. ルータオブジェクトをVueインスタンスに渡す export default router

<テンプレート>
  <div id="ホーム">
    私はホームページのコンテンツです<br>

    <router-link to="/home/news"> ニュース</router-link>
    <router-link to="/home/message"> メッセージ</router-link>
    <ルータービュー></ルータービュー>
    <!-- <h2>ユーザー名: {{ $route.params.username }}</h2> -->
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: "ホーム",
};
</スクリプト>

{
        パス: '/user',
        コンポーネント: ユーザー、
        子供たち： [
            {
                パス: 'メッセージ',
                コンポーネント: メッセージ、
            },
            {
                パス: 'ニュース',
                コンポーネント: ニュース、
            },
            // /user/news をリダイレクト
            {
                パス： ''、
                リダイレクト: 'ニュース'、
            },
        ]
    },

<テンプレート>
  <div>
    <h2>私はプロフィールページです</h2>
    <p>私のプロフィールページの詳細</p>
    <!-- 文字列入力を取得します。例: /profile/123 -->
    <p>$route.params:{{ $route.params }}</p>
    <!-- オブジェクト タイプ入力パラメータを取得します (例: /profile?name=1&age=10) -->
    <p>$route.query:{{ $route.query }}</p>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「プロフィール」、
};
</スクリプト>

<スタイルスコープ>
</スタイル>

const Profile = () => import('../components/Profile')
    {
        パス: '/profile/:id',
        コンポーネント: プロファイル
    }

 <ルータリンク
      :to="{
        パス: '/profile/' + 123,
        クエリ: { 名前: 'geekmice'、趣味: 'バスケットボール' }
      }"
      タグ="ボタン"
      >router-link はパラメータを渡します</router-link
    >

    <button @click="jsTransferParams">js 転送パラメータ</button>
   jsTransferParams() {
      this.$router.push({
        パス: "/profile/" + 666,
        クエリ: { 名前: "geekmice", 趣味: "ブラックテクノロジーの探求" },
      });
    },
    
    profile.vue はパラメータを取得します <p>$route.params:{{ $route.params }}</p>
    <p>$route.query:{{ $route.query }}</p>

//ルーティング関連情報を構成するimport Vue from 'vue'
「vue-router」からVueRouterをインポートします。

const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Message = () => import('../components/Message')
const News = () => import('../components/News')
const Profile = () => import('../components/Profile')

// Vue.use(VueRouter) から Vue.use(plugin) までプラグインをインストールします

// VueRouterオブジェクトを作成する constroutes = [
    {
        パス： ''、
        リダイレクト: '/home'
    },
    {
        パス: '/home',
        コンポーネント: ホーム、
        メタ: {
            タイトル: 「ホーム」
        }
    },
    {
        パス: '/profile/:id',
        コンポーネント: プロファイル、
        メタ: {
            タイトル: 「アーカイブ」
        }
    },
    {
        パス: '/about',
        コンポーネント: について、
        メタ: {
            タイトル: 「概要」
        }
    }, {
        パス: '/user',
        コンポーネント: ユーザー、
        子供たち： [
            {
                パス: 'メッセージ',
                コンポーネント: メッセージ、
            },
            {
                パス: 'ニュース',
                コンポーネント: ニュース、
            },
            {
                パス： ''、
                リダイレクト: 'ニュース'、
            },
        ]
    },
]

const ルーター = 新しい VueRouter({
    //ルートとコンポーネントルート間のアプリケーション関係を設定します。
    モード: "履歴"、
    リンクアクティブクラス: "アクティブ"
})

router.afterEach((to, from, next) => {
    ドキュメントのタイトル = to.matched[0].meta.title;
    次（）
})

// ルータオブジェクトをVueインスタンスに渡す export default router

<テンプレート>
    <div>
        <h1>スタートページ</h1>
        <input type="text" placeholder="入力してください..."">
    </div>
</テンプレート>

<テンプレート>
    <div>
        <h1>ページをキャッシュする必要はありません</h1>
        <input type="text" placeholder="入力してください">
    </div>
</テンプレート>

const KeepStart = () => import('../components/KeepStart')
const KeepEnd = () => import('../components/KeepEnd')
  {
        パス: '/keepStart',
        コンポーネント: KeepStart、
        名前:'keepStart',
        メタ: {
            キープアライブ: 真
        }
    },
    {
        パス: '/keepEnd',
        名前:'keepEnd',
        コンポーネント: KeepEnd、
        メタ: {
            キープアライブ: 偽
        }
    }

    <router-link to="/keepStart" tag="button">keepstart ページ</router-link>
    <router-link to="/keepEnd" tag="button">keepend ページ</router-link>
    <!-- 動的レンダリング コンポーネント -->
    <!-- <ルータービュー></ルータービュー> -->
    <キープアライブ>
      <ルータービュー v-if="$route.meta.keepAlive"></ルータービュー>
    </キープアライブ>
    <ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー>

vue ナビゲーションバーを作成する

<テンプレート>
  <div id="アプリ">
    <div id="タブバー">
      <div id="tab-bar-item">ホーム</div>
      <div id="tab-bar-item">カテゴリー</div>
      <div id="tab-bar-item">ショッピングカート</div>
      <div id="tab-bar-item">マイ</div>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント: {},
};
</スクリプト>

<スタイル>
/* CSS スタイルをインポート */
@import url("./assets/css/base.css");

#タブバー{
  ディスプレイ: フレックス;
  背景色: rgb(246, 246, 246);

  /* 絶対位置指定 */
  位置: 固定;
  左: 0;
  下部: 0;
  右: 0;
}

#タブバー項目 {
  フレックス: 1;
  テキスト配置: 中央;
  高さ: 49px;


}
</スタイル>

体{
    パディング: 0;
    マージン: 0;
}

<テンプレート>
  <div id="タブバー">
    <スロット></スロット>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "タブバー"
  }
</スクリプト>

<スタイルスコープ>
  #タブバー{
    ディスプレイ: フレックス;
    背景色: #f6f6f6;

    位置: 固定;
    左: 0;
    右: 0;
    下部: 0;

    ボックスの影: 0 -1px 1px rgba(100,100,100,.2);
  }
</スタイル>

<テンプレート>
  <!--すべてのアイテムに同じ画像とテキストが表示されます-->
  <div class="タブバーアイテム" @click="itemClick">
    <div v-if="!isActive"><スロット名="アイテムアイコン"></スロット></div>
    <div v-else><slot name="item-icon-active"></slot></div>
    <div :style="activeStyle"><slot name="item-text"></slot></div>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "TabBarItem",
    小道具: {
      パス: 文字列、
      アクティブカラー: {
        タイプ: 文字列、
        デフォルト: '赤'
      }
    },
    データ（） {
      戻る {
        // アクティブ: true
      }
    },
    計算: {
      アクティブです() {
        // /home -> item1(/home) = true
        // /home->item1(/category) = false
        // /home->item1(/cart) = true
        // /home->item1(/profile) = true
        this.$route.path.indexOf(this.path) !== -1 を返します
      },
      アクティブスタイル() {
        this.isActive を返しますか? {color: this.activeColor} : {}
      }
    },
    メソッド: {
      アイテムクリック() {
        this.$router.replace(this.path)
      }
    }
  }
</スクリプト>

<スタイルスコープ>
  .タブバー項目 {
    フレックス: 1;
    テキスト配置: 中央;
    高さ: 49px;
    フォントサイズ: 14px;
  }

  .タブバーアイテム画像 {
    幅: 24px;
    高さ: 24px;
    上マージン: 3px;
    垂直位置合わせ: 中央;
    下マージン: 2px;
  }
</スタイル>

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。

const Home = () => import('../views/home/Home')
const カテゴリー = () => インポート('../views/category/カテゴリー')
const Cart = () => import('../views/cart/Cart')
const Profile = () => import('../views/profile/Profile')

// 1. プラグインをインストールする Vue.use(VueRouter)

// 2. ルーティングオブジェクトを作成する constroutes = [
  {
    パス： ''、
    リダイレクト: '/home'
  },
  {
    パス: '/home',
    コンポーネント: ホーム
  },
  {
    パス: '/category',
    コンポーネント: カテゴリ
  },
  {
    パス: '/cart',
    コンポーネント: カート
  },
  {
    パス: '/profile',
    コンポーネント: プロファイル
  }
]
const ルーター = 新しい VueRouter({
  ルート、
  モード: '履歴'
})

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