Vueでルーティングを使用する方法

Vue のルーティング機能を使用すると、SPA でのページ ナビゲーションを管理し、URL パスをアプリケーション コンポーネントにマッピングできます。手順は次のとおりです。 Vue ルーティング ライブラリをインストールします。ルーターインスタンスを作成します。ルーターを Vue インスタンスにインストールします。 <router-link> を使用してルート リンクを定義します。 <router-view> を使用してルーティング コンポーネントを表示します。

Vue でのルーティングの使用

Vue のルーティング メカニズムの概要

Vue.js のルーティングは、シングル ページ アプリケーション (SPA) でページ ナビゲーションを管理するための組み込み機能です。これにより、開発者はアプリケーションのさまざまなコンポーネントまたはビューに対応するさまざまな URL パスを作成および管理できます。

Vue ルーティングの使用方法

1. Vue ルーティング ライブラリをインストールします

<code class="bash">npm install vue-router@next</code>

2. ルーター インスタンスを作成します

Vue.js アプリケーションで新しい Vue Router インスタンスを作成します。

<code class="javascript">import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})</code>

3. Vue インスタンスにルーター インスタンスをインストールします

ルーター インスタンスを Vue.js インスタンスにインストールします。

<code class="javascript">new Vue({
  router,
  el: '#app'
})</code>

4. ルーティング リンクを定義する

コンポーネント内の <router-link> タグを使用して、ルーティング リンクを定義します。 <router-link> 标签定义路由链接。

<code class="html"><router-link to="/about">关于我们</router-link></code>

5. 显示路由视图

在根组件中使用 <router-view> 标签显示当前激活的路由组件。

<code class="html"><router-view></router-view></code>

高级用法

动态路由

使用冒号 (:) 定义动态路由段，然后在组件中使用 $route.params

<code class="javascript">const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})</code>

5. ルーティング ビューを表示する

現在アクティブ化されているルーティング コンポーネントを表示するには、ルート コンポーネントの <router-view> タグを使用します。

<code class="javascript">const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      children: [
        { path: 'users', component: Users },
        { path: 'products', component: Products }
      ]
    }
  ]
})</code>

高度な使用法

動的ルーティング

🎜🎜コロン (:) を使用して動的ルート セグメントを定義し、$route.params を使用してコンポーネント内でそれらのセグメントにアクセスします。 🎜

<code class="javascript">router.beforeEach((to, from, next) => {
  // ...
})</code>

🎜🎜ネストされたルート🎜🎜🎜 親ルート内に子ルートをネストして、より複雑な階層ナビゲーションを作成します。 🎜rrreee🎜🎜ルート ガード🎜🎜🎜ルート ガードを使用して、ナビゲーションの発生前または後に特定のアクションを実行します。 🎜りー

以上がVueでルーティングを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。