Vue を使用してルーティング パラメータを動的に設定する

今回は、Vue を使用してルーティングパラメータを動的に設定する場合の注意点をいくつか紹介します。実際のケースを見てみましょう。

1. this.$router.go()，与js histroy.go() 使用状況を最後まで使用、1 進む、-1 戻る、現在のページ: 0

go を使用する場合は、既にアクセス履歴が必要であることに注意してください

ケース:

<template>
  <p> 
    <button @click="goht">后退<button> <br/>
    <button @click="goqj">前进<button> <br/>
    <button @click="gosx">刷新当前<button>
  </p>
 </template>
 <script>
  export default {
    methods: {
     goht(){
       this.$router.go(-1);
     },
     goqj(){
        this.$router.go(1);
     },
     gosx(){
       this.$router.go(0); //或者 this.$router.go(); 
     }
    }
  }
 </script>

2.電話:

Case

<template>
  <p>
     <button @click="pageA">去A页面</button> <br/>
     <button @click="pageB">去B页面</button> <br/>
  </p>
</template>
<script> 
 exprot default {
  methods: {
     pageA(){
        //去路由A页面，字符串形式只能是path，类似to="path"
       this.$router.push('/RouterA'); 
     },
     pageB(){
        //去路由B页面，数组形式，类似 :to="{}"
       this.$router.push(
         {
          name: 'RouterB',
          query: {'name': 'name1', title: 'title1'}
          //,params:{'name': 'name2', title: 'title2'}
         }
       );
     }
   }
 }
</script>

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

WeChatアプレットでポップアップボックス機能を作成する方法

VUEの使用状況の詳細な分析

以上がVue を使用してルーティング パラメータを動的に設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。