Vue で新しいページを開く方法

Vue は、最新の Web アプリケーションを開発するための人気のある JavaScript フレームワークです。 Vue は柔軟で簡単に拡張できるように設計されているため、単一ページ アプリケーションの構築に最適です。ただし、一部の初心者にとって、Vue でページを開くのは少し難しいかもしれません。この記事では、Vue で新しいページを開く方法と、ページを開くときに発生する可能性のあるいくつかの問題について説明します。

まず、Vue で新しいページを開く基本的な方法を見てみましょう。新しいページを開くには、Vue が提供するルーティング機能を使用する必要があります。ルーティングは Vue の重要な概念であり、URL にマップされるコンポーネントです。ルーティングにより、アプリケーション内の移動が非常に簡単になります。

Vue ルーティングを使用するには、まず Vue Router がインストールされていることを確認してください。以下に示すように、npm または Yarn を使用して Vue Router をインストールできます。

npm install vue-router

または

yarn add vue-router

インストールが完了したら、Vue Router を使用できます。まず、以下に示すように、Vue アプリケーションでルーター インスタンスを作成する必要があります。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

この例では、ルーター インスタンスが作成され、2 つのルートが定義されます。1 つはホームページ用、もう 1 つはアバウト ページ用です。 。各ルートには、URL パス (path)、名前 (name)、およびコンポーネント (component) があります。これらのルートは Vue アプリケーションで使用されます。

次に、作成したルーター インスタンスを Vue アプリケーションで使用する必要があります。以下に示すように、ルーター属性は Vue アプリケーションのルート インスタンスで使用できます。

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

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

基本的なルーティング設定が作成されたので、次のステップは Vue で新しいページを開くことです。

Vue で新しいページを開くには、Vue Router が提供する v-router-link コマンドを使用する必要があります。 v-router-link ディレクティブは、ユーザーをあるページから別のページに移動できるクリック可能なリンクを作成するために Vue で使用されます。

たとえば、About ページへのリンクを含むナビゲーション メニューを Vue で作成するには、次のコードを使用できます:

<router-link to="/about">About</router-link>

この例では、v-router-link ディレクティブ「About」ページへのリンクを作成するために使用されます。 to 属性はリンクの URL パスを指定します。ユーザーがリンクをクリックすると、Vue Router はこの URL パスによってマップされたコンポーネントに移動します。

Vue で新しいページを開く基本的な方法がわかったので、ページを開くときに発生する可能性のある問題をいくつか見てみましょう。

最初の質問は、新しいページの URL パラメーターにアクセスする方法です。 Vue で URL パラメーターにアクセスするには、$route オブジェクトを使用できます。 $route オブジェクトには、URL パラメーターやクエリ パラメーターなど、現在のルートに関する情報が含まれています。たとえば、パラメータには次の URL パスでアクセスします:

/about/:id

ID パラメータには、次のコードを使用して Vue でアクセスできます:

this.$route.params.id

2 番目の質問は、外部リンクを開く方法です。 Vueで。 Vue で外部リンクを開くには、Vue Router が提供する v-router-link ディレクティブの target 属性を使用できます。たとえば、次の Vrouter-link ディレクティブで外部リンクを開きます。

<router-link to="https://www.example.com" target="_blank">Example</router-link>

この例では、target 属性を使用して新しいウィンドウを開き、外部 URL にリンクします。

この記事では、Vue で新しいページを開く方法について説明しました。 Vue Router を使用して基本的なルーティング設定を作成する方法、v-router-link ディレクティブを使用してクリック可能なリンクを作成する方法、新しいページの URL パラメーターにアクセスする方法、および Vue で外部リンクを開く方法を学びました。これらのヒントは、マスター Vue 開発者になるのに役立ちます。

以上がVue で新しいページを開く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。