Vue ルーティングにジャンプする 3 つの方法は何ですか?

ジャンプ方法: 1. 「

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

router-view はルーティングコンテンツを実装する場所です。コンポーネントを導入する場合は、導入する場所を記述します。

router-view はコンテナとして使用する必要があることに注意してくださいvue-router を使用してルーティングを制御する場合。

ルーティングを介してジャンプする 3 つの方法

1. router-link [ジャンプを実現する最も簡単な方法]

<router-link to=&#39;需要跳转到的页面的路径>

ブラウザがこれを解析すると、 のようなタグに解析されます。

#div和css样式略
    <li >
        <router-link to="keyframes">点击验证动画效果 </router-link>
    </li>

router/index.js配下にジャンプする必要があるパスを事前に導入しておくことを忘れないでください。

[関連する推奨事項: 「vue.js チュートリアル 」]

2.this.$router.push({ パス: '/user'})

はルートでパラメーターを渡すためによく使用されます。使用法は 3 番目のタイプ

# と同じです。違いは次のとおりです:

1)、クエリ導入方法

params はルートを導入するために名前のみを使用できます

#そしてクエリはパスを使用して導入する必要があります

#2)、クエリ配信方法

は、パラメータの表示の ajax のパラメータの取得に似ています。ブラウザのアドレス バーの

params は post に似ています。パラメータはブラウザのアドレス バーに表示されません helloworld.vue の

select ファイル

<template>
.....
<li @click="change">验证路由传参</li>
</template>
 
<script>
export default {
  data () {
    return {
      id:43,  //需要传递的参数
    }
  },
  methods:{
    change(){
      this.$router.push({  //核心语句
        path:&#39;/select&#39;,   //跳转的路径
        query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          id:this.id ,
        }
      })
    }
  }
}
</script>

。vue ファイルの

<template>
  <select>
          <option value="1" selected="selected">成都</option>
          <option value="2">北京</option>
  </select>
</template>
 
<script>
    export default{
        data(){
            return{
                id:&#39;&#39;,
            }
        },
        created(){  //生命周期里接收参数
            this.id = this.$route.query.id,  //接受参数关键代码
            console.log(this.id)
        }
    }
</script>

3 と this.$router.replace{path: '/'} は類似しているため、繰り返しません。

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がVue ルーティングにジャンプする 3 つの方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。