ホームページ  >  記事  >  ウェブフロントエンド  >  Vue でルーティング パラメーターを動的に設定する方法の概要

Vue でルーティング パラメーターを動的に設定する方法の概要

不言
不言オリジナル
2018-06-29 17:14:071734ブラウズ

この記事では、Vue でルーティング パラメーターを動的に設定する事例を中心に紹介します。非常に優れており、必要な方は参考にしてください。

1 を使用して、Vue でルーティング パラメーターを動的に設定できます。使用法は常に 、進む 1、戻る -1、現在のページ: 0

go を使用する場合は、アクセス履歴がすでに必要であることに注意してくださいthis.$router.go(),与js histroy.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(&#39;/RouterA&#39;); 
     },
     pageB(){
        //去路由B页面,数组形式,类似 :to="{}"
       this.$router.push(
         {
          name: &#39;RouterB&#39;,
          query: {&#39;name&#39;: &#39;name1&#39;, title: &#39;title1&#39;}
          //,params:{&#39;name&#39;: &#39;name2&#39;, title: &#39;title2&#39;}
         }
       );
     }
   }
 }
</script>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

vuex の状態オブジェクトの使用方法

vue cli に基づいて複数ページのスキャフォールディングを再構築するプロセスの紹介


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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。