vue怎么通過點擊事件實現頁面跳轉

本篇內容主要講解“vue怎么通過點擊事件實現頁面跳轉”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue怎么通過點擊事件實現頁面跳轉”吧!

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怎么通過點擊事件實現頁面跳轉”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！