Vue-router プログラムナビゲーションの 2 つの実装コード

ページをナビゲートする2つの方法

宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する方法は宣言型ナビゲーションと呼ばれます。たとえば、通常のウェブページの<a></a>リンクや、Vue の<router-link></router-link>などです。
プログラムによるナビゲーション: JavaScript APIを呼び出してナビゲーションを実装する方法をプログラムによるナビゲーションと呼びます。例: 通常のWebページのlocation.href

プログラムナビゲーションの基本的な使用方法

一般的に使用されるプログラムナビゲーション API は次のとおりです。

this.$router.push ('ハッシュアドレス')

this.$router.go(n)

 定数ユーザー = {  
 		テンプレート: '<div><button @click="goRegister">登録ページへ移動</button></div>',  
  	メソッド: { 
  	 登録: 関数(){   
    // プログラムでルートのリダイレクトを制御する this.$router.push('/register'); 
  } 
  } 
 }

具体的な実装:

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
 <メタ文字セット="UTF-8" />
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
 <meta http-equiv="X-UA-compatible" content="ie=edge" />
 <title>ドキュメント</title>
 <!-- vue ファイルをインポート-->
 <!-- <script src="./lib/vue_2.5.22.js"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- <script src="./lib/vue-router_3.0.2.js"></script> -->
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 </head>
 <本文>
 <!-- VM インスタンスによって制御される領域 -->
 <div id="アプリ">
  <router-link to="/user/1">ユーザー1</router-link>
  <router-link to="/user/2">ユーザー2</router-link>
  <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
  <router-link to="/register">登録</router-link>

  <!-- ルートプレースホルダー -->
  <ルータービュー></ルータービュー>
 </div>

 <スクリプト>
  定数ユーザー = {
  プロパティ: ['id', 'uname', 'age'],
  テンプレート: `<div>
   <h1>ユーザー コンポーネント -- ユーザー ID: {{id}} -- 名前: {{uname}} -- 年齢: {{age}}</h1>
   <button @click="goRegister">登録ページへ移動</button>
  </div>`,
  メソッド: {
   登録() {
   this.$router.push('/register') //プログラムによるナビゲーション}
  },
  }

  const レジスタ = {
  テンプレート: `<div>
   <h1>コンポーネントを登録する</h1>
   <button @click="goBack">戻る</button>
  </div>`,
  メソッド: {
   戻る() {
   これ.$router.go(-1)
   }
  }
  }

  // ルーティングインスタンスオブジェクトを作成する const router = new VueRouter({
  // すべてのルーティングルール ルート: [
   { パス: '/'、リダイレクト: '/user' },
   {
   // 名前付きルート名: 'user',
   パス: '/user/:id',
   コンポーネント: ユーザー、
   プロパティ: ルート => ({ uname: 'zs', age: 20, id: route.params.id })
   },
   { パス: '/register'、コンポーネント: Register }
  ]
  })

  // vmインスタンスオブジェクトを作成する const vm = new Vue({
  //制御領域を指定します el: '#app',
  データ： {}、
  //ルータインスタンスオブジェクトをマウントします// router: router
  ルーター
  })
 </スクリプト>
 </本文>
</html>

router.push() メソッドのパラメータルール

 // 文字列 (パス名) 
router.push('/home') 
// オブジェクト router.push({ path: '/home' }) 
// 名前付きルート（パラメータを渡す） 
router.push({ name: '/user', params: { userId: 123 }}) 
// クエリパラメータを使用すると、/register?uname=lisi になります。 
router.push({ パス: '/register', クエリ: { uname: 'lisi' }})

Vue-router プログラムナビゲーションの実装コードに関するこの記事はこれで終わりです。Vue-router プログラムナビゲーションの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: