vueページにジャンプする3つの方法

1、ラベルジャンプ

個人的な理解: これは外部リンクへのジャンプに属し、プロジェクトではほとんど使用されません。

<a href="http://www.baidu.com/"><input type="button" value='百度'></a>

2.ルーターリンクジャンプ

プロジェクトの内部配線ジャンプ

<router-link to="/water-sewage-treatment" class="router-test">
                    查看全部水厂
</router-link>

3. イベントをクリックしてジャンプします

1つ目は、指定したルートにジャンプする場合です。

 html :
      <button @click="hreftwo" class="test-one">点我到第二个页面</button>
 js :
   methods:{
    
     //跳转页面
                    hreftwo(){
    
    
                              this.$router.push({
    
     path:'/two.html'  })
                              }
           }

2 つ目は、前のページにジャンプする場合です (前のページがない場合は、トップページに戻ります)。

html：
      <div @click="goback()">返回</div>
     // 只返回上一页
           goback(){
    
    
                this.$router.go(-1);
            },
     //如果没有上一页返回首页
    methods: {
    
    
        back(){
    
    
            if (window.history.length <= 1) {
    
    
                this.$router.push({
    
    path:'/'})
                return false
            } else {
    
    
                this.$router.go(-1)
            }
        }
    },

3. 余談: 最近のアプリ プロジェクトで使用されている vant コンポーネント ライブラリには van-cell ユニット コンポーネントが含まれており、図に示すようにジャンプ イベントが含まれていることが要件となります。

コード例:

原理はルーターリンクと同じですが、
ジャンプしたいルートに行くという別の状況があります。プロジェクトで作業しているときによく遭遇します。テーブル内の特定の属性に、このとき、図に示すように、スロットを使用して、それが配置されている要素の下に実装します:
#name は処理したい要素であり、router-link で実装されます。