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

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

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

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

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

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

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

npm install vue-router@next

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

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

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 }
  ]
})

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

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

new Vue({
  router,
  el: '#app'
})

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

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

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

5. 显示路由视图

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

<router-view></router-view>

高级用法

动态路由

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

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

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

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

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

高度な使用法

動的ルーティング

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

router.beforeEach((to, from, next) => {
  // ...
})

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

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