Vue のルーティング制御および管理テクノロジ-Vue.js-php.cn

Vue のルーティング制御および管理テクノロジ

王林

リリース： 2023-06-25 08:31:43

オリジナル

861 人が閲覧しました

Vue は非常に人気のあるフロントエンドフレームワークで、便利なルーティングの制御と管理を行うためのルーティングマネージャーを提供します。この記事では、開発者がこれらのテクノロジをより深く理解し、適用できるように、Vue のルーティング制御および管理テクノロジについて詳しく説明します。

1. Vue Router の基本

Vue Router は Vue.js の公式ルーティングマネージャーであり、Vue.js のコアと深く統合されており、単一のルーティング制御を適切に実装できます。ページアプリケーションです。 Vue Router は、ルートとコンポーネント間のマッピングを管理することで動的なビューの更新を実装し、ビューとデータの状態を効果的に分離して、アプリケーション構造をより明確にして保守しやすくします。

1.1 インストールと紹介

Vue Router を使用する前に、npm を通じてインストールする必要があります。次のコマンドでインストールできます:

npm install vue-router –save

ログイン後にコピー

インストールが完了したら、Vue Router を Vue アプリケーションに導入し、基本的な設定を行う必要があります。 main.js ファイルに次のコードを記述できます。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue')
}, {
  path: '/contact',
  name: 'contact',
  component: () => import('./pages/Contact.vue')
}, {
  path: '*',
  redirect: '/home'
}]

const router = new VueRouter({
  mode: 'hash', // hash模式
  routes // 路由路径配置
})

new Vue({
  el: '#app',
  router, // 注册路由器
  render: h => h(App)
})

ログイン後にコピー

1.2 ルーティングナビゲーション

Vue Router は、router-link タグを使用したナビゲーションやジャンプなど、ルーティングナビゲーションの複数の方法を提供します。ページ。ナビゲーションが完了するまで待ちます。など

コンポーネント内で router-link タグを使用すると、以下に示すように、ルートナビゲーションを簡単に実装できます。

<router-link to="/home">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/contact">联系我们</router-link>

ログイン後にコピー

さらに、以下に示すように、プログラムによるナビゲーションを使用してルートジャンプを実装することもできます。

// 基本路由跳转
this.$router.push('/home')

// 带参数的路由跳转
this.$router.push({
  name: 'about',
  params: {
    id: 20,
    name: '张三'
  }
})

// 跳转后执行异步操作
this.$router.push('/about', () => {
  console.log('路由跳转完成')
})

// 返回前一个路由
this.$router.go(-1)

// 返回到命名路由
this.$router.push({
  name: 'home'
})

ログイン後にコピー

1.3 ルーティングのネスト

Vue Router は、より複雑なルーティングの制御と管理を実現できる、マルチレベルのネストされたルーティングの構成をサポートしています。たとえば、以下に示すように、親ルートの下にサブルートとネストされたサブルートを定義できます:

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue'),
  children: [{
    path: 'intro',
    name: 'about-intro',
    component: () => import('./pages/AboutIntro.vue')
  }, {
    path: 'contact',
    name: 'about-contact',
    component: () => import('./pages/AboutContact.vue')
  }]
}]

ログイン後にコピー

ルーティングコンポーネントで、タグを使用してサブルートを占有することができます。 -ルート。親ルートはコンポーネントであり、次に示すように、子ルートはこのコンポーネントのタグ内にレンダリングされます:

<template>
  <div>
    <h2>关于我们</h2>
    <ul>
      <li><router-link :to="{ name: 'about-intro' }">公司简介</router-link></li>
      <li><router-link :to="{ name: 'about-contact' }">联系我们</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

ログイン後にコピー

2. Vue Router Advanced

さらにルーティング管理機能に加えて、Vue Router はルーティングパラメータ、ルーティングガード、ダイナミックルーティングなどの高度な機能も提供します。このセクションでは、これらの機能の使用法と実装について説明します。

2.1 ルーティングパラメータの受け渡し

実際の開発では、通常、現在ログインしているユーザーの情報や記事リストなどのパラメータをルーティングコンポーネントに渡す必要があります。 Vue Router では、パラメータは props 属性を介して渡すことができます。

以下に示すように、ルートを定義するとき、props 属性を使用してパラメータを転送します。

const routes = [
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
]

ログイン後にコピー

ルーティングコンポーネントで、props を true に設定して、ルーティングパラメータをコンポーネントの props として使用します。属性が渡されます。例:

<template>
  <div>
    <h2>User Details</h2>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

ログイン後にコピー

この時点で、ルーティングパラメータはユーザー属性として User コンポーネントに渡され、コンポーネントは this.user を通じてこれらのパラメータを取得できます。

2.2 ルートガード

ルートガードは、Vue Router が提供する重要な機能で、ルートジャンプ処理中に権限確認やログイン判定などを行うことができます。 Vue Router は、グローバルガード、ルート専用ガード、コンポーネント内ガードの 3 種類のルートガードを提供します。

グローバルガードには、beforeEach、beforeResolve、afterEach が含まれます。これらは、配線ジャンプの前、ジャンプが成功した後、および配線プロセス全体が完了した後にインターセプトされます。例:

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (authService.isAuthenticated()) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

ログイン後にコピー

ルート排他的ガードは、ルートの定義時に設定することも、コンポーネント内で設定することもできます。例:

const router = new VueRouter({
  routes: [{
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          beforeEnter: (to, from, next) => {
            if (authService.isAdmin()) {
              next()
            } else {
              next({
                name: 'login'
              })
            }
          }
        }]
      }]
 })

ログイン後にコピー

コンポーネント内のガードは、ルーティングコンポーネントで定義された beforeRouteEnter、beforeRouteUpdate、および beforeRouteLeave 関数です。例:

export default {
  beforeRouteEnter(to, from, next) {
    console.log('进入路由组件')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('更新路由组件')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开路由组件')
    next()
  }
}

ログイン後にコピー

2.3 動的ルーティング

動的ルーティングとは、URL パラメータに基づいてルートを動的に照合するテクノロジを指します。 Vue Router は、ルーティングパラメーターに基づいた動的なマッチング機能を提供し、さまざまなパラメーターに基づいてルーティングジャンプやコンポーネントレンダリングを実行できます。

たとえば、ルートを定義する場合、以下に示すように、コロン「:」を使用してパラメータを指定できます。

const routes = [
  {
    path: '/posts/:postId',
    component: Post,
    props: true
  }
]

ログイン後にコピー

コンポーネント内では、これを通じてルートを取得できます。$ Route.params パラメーター (以下に示すように):

export default {
  mounted() {
    console.log('PostComponent: ' + this.$route.params.postId)
  }
}

ログイン後にコピー

ジャンプをルーティングするとき、$router.push メソッドを使用して動的ルートマッチングを実行できます (例:

this.$router.push({
  path: '/posts/' + id
})

ログイン後にコピー

3)。

# この記事では、ルートナビゲーション、ルートネスティング、ルートパラメーターの受け渡し、ルートガード、動的ルーティングなど、Vue Router の基本的な使用法と高度な機能を紹介します。 Vue Router は Vue.js の重要なルーティングマネージャーであり、フロントエンドアプリケーションのルーティング制御と管理をより適切に実装するのに役立ちます。この記事が皆さんにインスピレーションを与え、Vue Router テクノロジをより適切に開発に適用するのに役立つことを願っています。

以上がVue のルーティング制御および管理テクノロジの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。