VueとElement-UIを使ってルートナビゲーション機能を実装する方法

Vue と Element-UI を使用してルーティングおよびナビゲーション機能を実装する方法

Vue.js は、ユーザー インターフェイスの構築に使用されるオープン ソースの JavaScript フレームワークです。使いやすく柔軟になるように設計されているため、開発者は効率的な単一ページ アプリケーションを構築できます。 Element-UI は、Vue.js に基づく UI フレームワークであり、美しく使いやすいコンポーネントのセットを提供します。この記事では、VueとElement-UIを使ってルートナビゲーション機能を実装する方法を紹介します。

まず、Vue と Element-UI がインストールされ、構成されていることを確認してください。まだインストールしていない場合は、公式 Web サイトで詳細なインストール ガイドを参照してください。

次に、Vue インスタンスを作成し、ルーティングを構成する必要があります。この例では、Vue Router を使用してルーティングを処理します。 Vue Router がインストールされていることを確認してください。

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueRouter)
Vue.use(ElementUI)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 更多路由...
  ]
})

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

上記のコードでは、Vue と Element-UI をインポートし、Vue Router を設定しました。ホームページ (Home) と概要ページ (About) の 2 つのルートを設定しました。ニーズに応じてさらにルートを追加できます。

次に、プロジェクト内に対応するコンポーネントを作成する必要があります。

// Home.vue

<template>
  <div>
    <h1 id="欢迎来到首页">欢迎来到首页</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

// About.vue

<template>
  <div>
    <h1 id="关于我们">关于我们</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

これで、2 つのコンポーネントが作成されました。それらをルートに登録する必要があります。

// main.js

import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 更多路由...
  ]
})

これで、アプリケーションでルート ナビゲーション機能を使用できるようになりました。 Element-UI は、ナビゲーション リンクを表示するために使用できるナビゲーション バー (NavMenu) と呼ばれるコンポーネントを提供します。

// App.vue

<template>
  <div id="app">
    <el-menu
      default-active="Home"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="Home">首页</el-menu-item>
      <el-menu-item index="About">关于</el-menu-item>
      <!-- 更多菜单项... -->
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleSelect(key) {
      this.$router.push({ name: key })
    }
  }
}
</script>

上記のコードでは、Element-UI のナビゲーション バー コンポーネント (el-menu) を使用してナビゲーション リンクを表示し、それらをルーティングにバインドします。ユーザーがナビゲーション リンクをクリックすると、this.$router.push() メソッドを呼び出してそのページにジャンプします。

このアプリケーションを実行すると、シンプルなナビゲーション バーが表示され、さまざまなページ間を切り替えることができます。

上記は、Vue と Element-UI を使用してルーティング ナビゲーション機能を実装する簡単な例です。ニーズに合わせて拡張およびカスタマイズできます。この記事がお役に立てば幸いです!

以上がVueとElement-UIを使ってルートナビゲーション機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。