Vue Router でプログラムによるナビゲーションを使用するにはどうすればよいですか?-Vue.js-php.cn

Vue Router でプログラムによるナビゲーションを使用するにはどうすればよいですか?

WBOY

リリース： 2023-07-21 21:29:29

オリジナル

803 人が閲覧しました

Vue Router は、Vue.js によって公式に提供されているルーティング管理プラグインで、URL パスを介してさまざまなコンポーネントのレンダリングとナビゲーションを管理できます。その中でも、プログラムによるナビゲーションは Vue Router によって提供される重要な機能であり、コードを通じてルーティングジャンプやナビゲーション操作を制御します。

Vue Router では、$route オブジェクトのメソッドを通じてプログラムによるナビゲーションを実現できます。 router.push、router.replace、router.go などのメソッドを呼び出すことで、ページにジャンプできます。具体的な使い方を見てみましょう。

まず、vue-router ライブラリに基づいて Vue Router インスタンスを作成し、それを Vue インスタンスに挿入する必要があります。 Vue Router インスタンスを作成するときは、ルーティングマッピングを構成し、さまざまなパスに対応するコンポーネントを指定する必要があります。例:

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

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

// 使用Vue Router插件
Vue.use(VueRouter)

// 创建Vue Router实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

// 注入Vue实例
new Vue({
  router,
  el: '#app',
  // ...
})

ログイン後にコピー

Vue Router インスタンスを作成した後、プログラムによるナビゲーションを使用してページにジャンプできます。以下では、3 つのメソッド router.push、router.replace、router.go の使用法をそれぞれ紹介します。

router.push

router.push メソッドを使用して、指定されたパスにジャンプし、ブラウザのアクセス履歴にパスが追加されます。次の例は、ボタンをクリックした後に router.push メソッドを使用して About ページにジャンプするプロセスを示しています。

##router.replaceこのメソッドは、指定されたパスにジャンプするために使用されますが、ブラウザーのアクセス履歴に新しいレコードは追加されません。次の例は、ボタンをクリックした後に router.replace

#router.go メソッドは、ブラウザのアクセス履歴を前後に移動できます。負の数値を渡すと、後方ナビゲーションを示すことができます。ボタンをクリックした後、 を渡しますrouter .go(-1)前のページに戻る効果を実現します。

// template
<template>
  <div>
    <button @click="goAbout">Go to About</button>
  </div>
</template>

// script
<script>
export default {
  methods: {
    goAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

ログイン後にコピー