vue如何通過點選事件實現頁面跳轉詳解

2022-07-10 14:02:03

前言

頁面跳轉，我們一般都通過路由跳轉實現，通常情況下可直接使用router-link標籤實現頁面跳轉，但是如果我們想通過點選別的標籤實現頁面跳轉，怎麼辦呢？這個時候我們就要用到this.$router.push()方法，下面來給大家簡單介紹一下使用！

this.$router.push()

1.首先我們要定義一個點選事件

2.在定義事件中呼叫this.$router.push()方法

<template>
    <button @click = "handle">點選跳轉</button>
</template>
<script>
    export default{
        methods:{
            handle (){
            //  路徑/home對應我在router目錄下index.js中定義的path屬性值
                this.$router.push('/home');
            }
        }
    }
</script>

目標跳轉頁面路由在router目錄下index.js定義如下：

export default new Router({
  routes: [
    {
      path: '/home',
      name:'Home',
      component: Home,
    },
 ]
})

this.$router.push()中的引數規則

引數為字串，即路徑名稱

//  路徑/home對應router目錄下index.js中定義的path屬性值
this.$router.push('/home');

引數為物件

//  對應router目錄下index.js中定義的path
this.$router.push({path:'/home'});

引數為路由命名

//  對應router目錄下index.js中定義的name
this.$router.push({name:'Home'});

帶傳遞引數

// params裡面放置的是我們要傳遞過去的引數
this.$router.push({name:'Home',params:{user:'david'}});

帶查詢引數

// 帶查詢引數，傳遞過去的內容會自動拼接變成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

引數的接收

當我們使用params進行傳參時，只需在接收引數的地方使用this.$route.params進行接收即可

eg：

//傳參
this.$router.push({name:'Home',params:{user:'david'}});

// 在name為Home的元件中接收引數
const id=this.$route.params.id;
console.log(this.$route.params);//列印結果為{user:'david'}

當我們使用query傳參時，只需在接收引數的地方使用this.$route.query進行接收即可，用法同上

！！！這裡有一個小細節：$符號後面跟的是route不是router，跳轉的時候 $後面跟的是router！！！

注意

query傳參的引數會帶在url後邊展示在位址列(/home?user=david)，params傳參的引數不會展示到位址列
由於動態路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無效，需要用name來指定頁面
我們也可以用this.$router.replace()來實現頁面跳轉，二者的區別是push跳轉之後可以通過瀏覽器的回退鍵回到原來的頁面，而一旦使用replace跳轉之後，無法回到原來頁面

補充：VUE實現從一個頁面跳轉到另一個頁面的指定位置

例如，從網站的首頁點選跳轉到指定頁面的底部。

首頁 home

<div @click="toPath('/targetPage#target')">
    <p>點選跳轉</p>
</div>

methods:{
    //點選跳轉方法
    toPath(path) {
        this.$router.push({path: path})
    }
}

跳轉到的頁面 targetPage

<div class="location" id="target">
    <p>指定位置</p>
</div>

//在mounted裡
mounted() {
    var hash = window.location.hash;
    var index = hash.lastIndexOf("#");
    if (index != -1) {
       var id = hash.substring(index + 1, hash.length + 1);
       var div = document.getElementById(id);
       if (div) {
         setTimeout(function () {
           console.log($(div).offset().top);
           $('html, body').animate({scrollTop: $(div).offset().top - 43}, 500)
         }, 500);
       }
    }
}

親測有效：D

總結

到此這篇關於vue如何通過點選事件實現頁面跳轉的文章就介紹到這了,更多相關vue點選事件實現頁面跳轉內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vue如何通過點選事件實現頁面跳轉詳解

目錄

前言

this.$router.push()

this.$router.push()中的引數規則

引數的接收

注意

補充：VUE實現從一個頁面跳轉到另一個頁面的指定位置

總結

熱門文章