欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何通過點擊事件實現(xiàn)頁面跳轉詳解

 更新時間:2022年07月10日 10:05:47   作者:瘋狂的小強呀  
頁面跳轉,我們一般都通過路由跳轉實現(xiàn),通常情況下可直接使用router-link標簽實現(xiàn)頁面跳轉,下面這篇文章主要給大家介紹了關于vue如何通過點擊事件實現(xiàn)頁面跳轉的相關資料,需要的朋友可以參考下

前言

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

this.$router.push()

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

2.在定義事件中調(diào)用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()中的參數(shù)規(guī)則

參數(shù)為字符串,即路徑名稱

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

參數(shù)為對象

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

參數(shù)為路由命名

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

帶傳遞參數(shù)

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

帶查詢參數(shù)

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

參數(shù)的接收

當我們使用params進行傳參時,只需在接收參數(shù)的地方使用this.$route.params進行接收即可

eg:

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

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

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

!??!這里有一個小細節(jié):$符號后面跟的是route不是router,跳轉的時候 $后面跟的是router?。?!

注意

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

補充:VUE實現(xiàn)從一個頁面跳轉到另一個頁面的指定位置

例如,從網(wǎng)站的首頁點擊跳轉到指定頁面的底部。

首頁 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如何通過點擊事件實現(xiàn)頁面跳轉的文章就介紹到這了,更多相關vue點擊事件實現(xiàn)頁面跳轉內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • VUE前端實現(xiàn)token的無感刷新3種方案(refresh_token)

    VUE前端實現(xiàn)token的無感刷新3種方案(refresh_token)

    這篇文章主要給大家介紹了關于VUE前端實現(xiàn)token的無感刷新3種方案(refresh_token)的相關資料,為了提供更好的用戶體驗,我們可以通過實現(xiàn)Token的無感刷新機制來避免用戶在使用過程中的中斷,需要的朋友可以參考下
    2023-11-11
  • 從零搭建一個vite+vue3+ts規(guī)范基礎項目(搭建過程問題小結)

    從零搭建一個vite+vue3+ts規(guī)范基礎項目(搭建過程問題小結)

    這篇文章主要介紹了從零搭建一個vite+vue3+ts規(guī)范基礎項目,本項目已vite開始,所以按照vite官方的命令開始,對vite+vue3+ts項目搭建過程感興趣的朋友一起看看吧
    2022-05-05
  • VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子

    VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子

    今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue-router的使用方法及含參數(shù)的配置方法

    vue-router的使用方法及含參數(shù)的配置方法

    這篇文章主要介紹了vue-router的使用方法及含參數(shù)的配置方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-11
  • Vue實現(xiàn)導出Excel表格文件提示“文件已損壞無法打開”的解決方法

    Vue實現(xiàn)導出Excel表格文件提示“文件已損壞無法打開”的解決方法

    xlsx用于讀取解析和寫入Excel文件的JavaScript庫,它提供了一系列的API處理Excel文件,使用該庫,可以將數(shù)據(jù)轉換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實現(xiàn)導出Excel表格,提示文件已損壞,無法打開的解決方法,需要的朋友可以參考下
    2024-01-01
  • Element MessageBox彈框的具體使用

    Element MessageBox彈框的具體使用

    這篇文章主要介紹了Element MessageBox彈框的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • vue修改數(shù)據(jù)視圖更新原理學習

    vue修改數(shù)據(jù)視圖更新原理學習

    這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學習,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-11-11
  • vue 登錄滑動驗證實現(xiàn)代碼

    vue 登錄滑動驗證實現(xiàn)代碼

    這篇文章主要介紹了vue 登錄滑動驗證實現(xiàn)代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-08-08
  • Vue組件高級通訊之$children與$parent

    Vue組件高級通訊之$children與$parent

    這篇文章主要為大家介紹了Vue組件高級通訊之$children與$parent,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • vue運行項目時network顯示unavailable的問題及解決

    vue運行項目時network顯示unavailable的問題及解決

    這篇文章主要介紹了vue運行項目時network顯示unavailable的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論