Vue Router のルート命名規則はどのように定義されていますか?-Vue.js-php.cn

Vue Router は、Vue.js によって公式に提供されているルーティングマネージャーで、シングルページアプリケーションに強力なルーティング機能を提供します。 Vue Router では、ルートはルーティングテーブルを通じて定義され、ルーティングテーブル内の各ルートは一意の名前、つまりルートの命名を定義できます。この記事では、Vue Router のルーティング命名規則とその使用方法を紹介します。

Vue Router では、name属性を使用して各ルートに一意の名前を定義できます。ルートに名前を設定することで、コード内で簡単に該当ルートを参照したりジャンプしたりすることができます。以下は、ルーティングの名前付けの使用例です。

import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home.vue' import About from '@/views/About.vue' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'home', // 设置路由名称为home component: Home }, { path: '/about', name: 'about', // 设置路由名称为about component: About } ] }) export default router

ログイン後にコピー

上記のコードでは、2 つのルーティングコンポーネントHomeとAboutにそれぞれルーティング名を設定します。homeとaboutは、それぞれ 2 つのパス/と/aboutに対応します。

コード内で対応するルートを参照してジャンプする場合、this.$router.push({ name: 'home' })を使用してhome # にジャンプできます。 ##このルートの場合、this.$router.push({ name: 'about' })を使用して、このルートのaboutにジャンプします。

コード内でルートをジャンプするだけでなく、ルートリンクでもルート名を使用できます。ルート名を使用したリンクの例を次に示します。

Home About

ログイン後にコピー

上記のコードでは、

コンポーネントを使用してルートリンクを生成します。to 属性を{ name: 'home' } および{ name: 'about' } に設定すると、home へのポインターを生成できます。 とabout これら 2 つのルートのリンク。

要約すると、Vue Router のルート命名規則は、各ルートに一意の名前を設定することによって実装されます。ルートに名前を設定すると、コード内で対応するルートを簡単に参照してジャンプできるようになります。また、ルートリンクでのナビゲーションにルート名を使用することもできます。

この記事が、Vue Router のルーティング命名規則を理解するのに役立つことを願っています。 Vue Router の機能と使用法について詳しく知りたい場合は、公式ドキュメントと関連する学習リソースを確認してください。 Vue Router を使用して強力なシングルページアプリケーションの開発が成功することを祈っています。

以上がVue Router のルート命名規則はどのように定義されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。