Vue 路由跳轉方法

ue路由跳轉的方式總結

vue路由跳轉有四種方式

router-link

this.$router.push() (函數里面調用)

this.$router.replace() (用法同push)

this.$router.go(n)

不帶參

router-link

<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name  
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。

this.$router.push()

this.$router.push('/home') 
this.$router.push({name:'home'}) 
this.$router.push({path:'/home'})

this.$router.replace() (用法同push)

帶參

router-link

<router-link :to="{name:'home', params: {id:1}}"> 
// params傳參數 (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參  $route.params.id
// script 取參  this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 
// query傳參數 (類似get,url后面會顯示參數)
// 路由可不配置
// html 取參  $route.query.id
// script 取參  this.$route.query.id

this.$router.push(query傳參

this.$router.go(n)
this.router.go(n)this.router.go(n)this.router.go(n) 向前或者向后跳轉n個頁面，n可為正整數或負整數

區別

在用router-link標簽來跳轉頁面嗎？

out！今天就帶你解鎖 Vue 的編程式導航，用 Javascript 代碼輕松實現頁面跳轉，讓你的項目更靈活、更強大！

基本跳轉：

1. 導入路由實例：

首先，在你的 Vue 組件中導入 vue-router 實例。

javascript

import { useRouter } from 'vue-router';

2. 定義路由方法：

使用 useRouter() Hook 獲取路由實例，并定義跳轉方法。

3. 點擊按鈕觸發跳轉：

在你的按鈕元素上添加 @click 事件監聽器，調用跳轉方法。

示例代碼：

html

<template>
  <button @click="goToHome">前往首頁</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goToHome = () => {
      router.push('/');  //跳轉到首頁
    };

    return {
      goToHome
    }
  }
};
</script>

兩種語法詳解：

1. router.push(location):

location 可以是字符串路徑、對象或命名路由。
添加新的歷史記錄條目，相當于瀏覽器的前進操作。
適用于跳轉到不同路徑或使用命名路由。

2. router.replace(location):

location 可以是字符串路徑、對象或命名路由。
替換當前歷史記錄條目，相當于瀏覽器刷新操作。
適用于跳轉到同一路徑的不同參數，或避免生成多余的瀏覽器歷史記錄。

代碼示例：

javascript

// 使用字符串路徑跳轉
router.push('/profile');

// 使用對象跳轉，并傳遞參數
router.replace({ path: '/products', query: { id: 123 } });

// 使用命名路由跳轉
router.push({ name: 'profile' });

編程式導航的優勢：

更靈活：可以根據條件動態跳轉到不同的頁面。
更強大：可以實現更復雜的導航邏輯，例如基于用戶權限的跳轉。
更易于測試：可以方便地模擬不同場景下的導航行為。

希望這篇文章能幫助你快速上手 Vue 的編程式導航，靈活操控頁面跳轉，讓你的應用更具交互性！

歡迎在評論區分享你的導航技巧和創意，一起探索 Vue 的無限可能！

#Java后端需要學習哪些技術#

插入，更新或從DOM中刪除項目時，Vue提供了多種應用轉換效果的方法。這包括以下工具：

自動為CSS轉換和動畫應用類
集成第三方CSS動畫庫，如Animate.css
使用JavaScript在轉換掛鉤期間直接操作DOM
整合第三方JavaScript動畫庫，例如Velocity.js

在這個頁面上，我們只會介紹進入，離開和列表轉換，但您可以看到管理狀態轉換的下一部分。

過渡單個元素/組件

Vue提供了一個transition包裝組件，允許您在以下上下文中為任何元素或組件添加進入/離開轉換：

有條件呈現（使用v-if）
有條件顯示（使用v-show）
動態組件
組件根節點

這就是一個例子：

<div id="demo">
 <button v-on:click="show = !show">
 Toggle
 </button>
 <transition name="fade">
 <p v-if="show">hello</p>
 </transition>
</div>
new Vue({
 el: '#demo',
 data: {
 show: true
 }
})
.fade-enter-active, .fade-leave-active {
 transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 opacity: 0
}

切換

hello

transition插入或移除組件中包含的元素時，會發生以下情況：

1. Vue會自動嗅探目標元素是否有CSS轉換或動畫應用。如果是這樣，CSS轉換類將在適當的時機添加/刪除。

2. 如果轉換組件提供了JavaScript鉤子，這些鉤子將在適當的時機調用。

3. 如果沒有檢測到CSS轉換/動畫，并且沒有提供JavaScript鉤子，插入和/或刪除的DOM操作將在下一幀立即執行（注意：這是一個瀏覽器動畫框架，與Vue的概念不同nextTick）.Transition ClassesThere有六類申請進入/離開轉換。

4. v-enter：輸入的起始狀態。插入元素之前添加，插入元素后刪除一幀。

5. v-enter-active：輸入的活動狀態。在整個進入階段應用。插入元素之前添加，當過渡/動畫完成時刪除。該類可用于定義輸入轉換的持續時間，延遲和緩動曲線。

6. v-enter-to：僅適用于版本2.1.8+。結束進入狀態。插入元素后添加一個框架（同時v-enter刪除），當轉換/動畫完成時刪除。

7. v-leave：開始狀態請假。當離開轉換被觸發時立即添加，在一幀后刪除。

8. v-leave-active：離開的活動狀態。在整個離開階段應用。當離開轉換被觸發時立即添加，當轉換/動畫結束時刪除。該類可用于定義離開轉換的持續時間，延遲和緩動曲線。

9. v-leave-to：僅適用于版本2.1.8+。結束離開狀態。加入一個幀一個離開轉換被觸發（在相同的時間之后v-leave被移除），當過渡/動畫完成除去。

這些類將與過渡的名稱為前綴。這里的v-前綴是你使用<transition>沒有名字的元素時的默認值。如果你使用<transition name="my-transition">例子，那么這個v-enter類將會是my-transition-enter。v-enter-active和v-leave-active讓您能夠為進入/離開轉換指定不同的緩動曲線，您將在下面的部分中看到一個示例.CSS轉換一種最常見的轉換類型使用CSS轉換。下面是一個例子：

<button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div>new Vue({ el: '#example-1', data: { show: true } })/* Enter and leave animations can use different */ /* durations and timing functions. */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active below version 2.1.8 */ { transform: translateX(10px); opacity: 0; }

CSS動畫CSS動畫以與CSS轉換相同的方式應用，區別在于v-enter不是在插入元素后立即移除，而是在animationend事件中。這里是一個例子，為了簡潔起見，省略了前綴CSS規則：<div id="example-2"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <p v-if="show">Look at me!</p> </transition> </div>new Vue({ el: '#example-2', data: { show: true } }).bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

自定義轉換類您還可以通過提供以下屬性來指定自定義轉換類：

10. enter-class

11. enter-active-class

12. enter-to-class (2.1.8+)

13. leave-class

14. leave-active-class

15. leave-to-class (2.1.8+)

這些將覆蓋傳統的類名稱。當您想要將Vue的轉換系統與現有的CSS動畫庫（如Animate.css）結合使用時，此功能特別有用。

這是一個例子：

<link  rel="stylesheet" type="text/css">
<div id="example-3">
 <button @click="show = !show">
 Toggle render
 </button>
 <transition
 name="custom-classes-transition"
 enter-active-class="animated tada"
 leave-active-class="animated bounceOutRight"
 >
 <p v-if="show">hello</p>
 </transition>
</div>
new Vue({
 el: '#example-3',
 data: {
 show: true
 }
})

一起使用轉換和動畫

Vue需要附加事件監聽器才能知道轉換何時結束。它可以是transitionend或者animationend，取決于所應用的CSS規則的類型。如果您只使用其中一種，Vue可以自動檢測正確的類型。

然而，在某些情況下，您可能希望同時擁有兩個元素，例如由Vue觸發的CSS動畫，以及懸停時的CSS過渡效果。在這些情況下，您必須在type屬性中明確聲明您想要Vue關心的類型，其值為animation或transition。

顯式過渡時間

New in 2.2.0+

在大多數情況下，Vue可以自動計算轉換完成的時間。默認情況下，Vue等待根轉換元素上的第一個transitionend或animationend事件。然而，這可能并不總是需要的 - 例如，我們可能有一個編排的轉換序列，其中一些嵌套的內部元素具有比根轉換元素延遲的轉換或更長的轉換持續時間。

在這種情況下，您可以使用組件duration上的prop 指定明確的轉換持續時間（以毫秒為單位）<transition>：

<transition :duration="1000">...</transition>

您還可以為輸入和保留持續時間指定單獨的值：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript Hooks

你也可以在屬性中定義JavaScript hooks：

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
 <!-- ... -->
</transition>
// ...
methods: {
 // --------
 // ENTERING
 // --------
 beforeEnter: function (el) {
 // ...
 },
 // the done callback is optional when
 // used in combination with CSS
 enter: function (el, done) {
 // ...
 done()
 },
 afterEnter: function (el) {
 // ...
 },
 enterCancelled: function (el) {
 // ...
 },
 // --------
 // LEAVING
 // --------
 beforeLeave: function (el) {
 // ...
 },
 // the done callback is optional when
 // used in combination with CSS
 leave: function (el, done) {
 // ...
 done()
 },
 afterLeave: function (el) {
 // ...
 },
 // leaveCancelled only available with v-show
 leaveCancelled: function (el) {
 // ...
 }
}

這些鉤子可以與CSS轉換/動畫結合使用或單獨使用。

當使用JavaScript的過渡只，將 需要為回調和鉤。否則，它們將被同步調用，并且轉換將立即結束。done enter leave

明確添加v-bind:css="false"僅用于JavaScript的轉換也是一個好主意，以便Vue可以跳過CSS檢測。這也可以防止CSS規則意外干擾轉換。

現在我們來看一個例子。這里使用了Velocity.js的JavaScript轉換：

<!--
Velocity works very much like jQuery.animate and is
a great option for JavaScript animations
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
 <button @click="show = !show">
 Toggle
 </button>
 <transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:leave="leave"
 v-bind:css="false"
 >
 <p v-if="show">
 Demo
 </p>
 </transition>
</div>
new Vue({
 el: '#example-4',
 data: {
 show: false
 },
 methods: {
 beforeEnter: function (el) {
 el.style.opacity = 0
 },
 enter: function (el, done) {
 Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
 Velocity(el, { fontSize: '1em' }, { complete: done })
 },
 leave: function (el, done) {
 Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
 Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
 Velocity(el, {
 rotateZ: '45deg',
 translateY: '30px',
 translateX: '30px',
 opacity: 0
 }, { complete: done })
 }
 }
})

初始渲染過渡

如果您還想在節點的初始渲染上應用轉場，則可以添加appear屬性：

<transition appear>
 <!-- ... -->
</transition>

默認情況下，這將使用為進入和離開指定的轉換。但是，如果您想要，也可以指定自定義CSS類：

<transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" (2.1.8+)
 appear-active-class="custom-appear-active-class"
>
 <!-- ... -->
</transition>

和自定義JavaScript鉤：

<transition
 appear
 v-on:before-appear="customBeforeAppearHook"
 v-on:appear="customAppearHook"
 v-on:after-appear="customAfterAppearHook"
 v-on:appear-cancelled="customAppearCancelledHook"
>
 <!-- ... -->
</transition>

元素之間的過渡

我們稍后討論組件之間的轉換，但也可以使用v-if/ 在各個原始元素之間轉換v-else。最常見的兩元素轉換之一是在列表容器和描述空列表的消息之間：

<transition>
 <table v-if="items.length > 0">
 <!-- ... -->
 </table>
 <p v-else>Sorry, no items found.</p>
</transition>

這很有效，但有一點需要注意：

在具有相同標簽名稱的元素之間切換時，必須通過為Vue指定唯一key屬性來區分它們是不同的元素。否則，Vue的編譯器只會替換元素的內容以提高效率。即使在技術上沒有必要，但總是在<transition>組件內鍵入多個項目被認為是很好的做法。

例如：

<transition>
 <button v-if="isEditing" key="save">
 Save
 </button>
 <button v-else key="edit">
 Edit
 </button>
</transition>

在這些情況下，您也可以使用該key屬性在同一元素的不同狀態之間轉換。代替使用的v-if和v-else，上述例子可以被重寫為：

<transition>
 <button v-bind:key="isEditing">
 {{ isEditing ? 'Save' : 'Edit' }}
 </button>
</transition>

實際上可以在任意數量的元素之間進行轉換，可以使用多個v-ifs或將單個元素綁定到動態屬性。例如：

<transition>
 <button v-if="docState === 'saved'" key="saved">
 Edit
 </button>
 <button v-if="docState === 'edited'" key="edited">
 Save
 </button>
 <button v-if="docState === 'editing'" key="editing">
 Cancel
 </button>
</transition>

這也可以寫成：

<transition>
 <button v-bind:key="docState">
 {{ buttonMessage }}
 </button>
</transition>
// ...
computed: {
 buttonMessage: function () {
 switch (this.docState) {
 case 'saved': return 'Edit'
 case 'edited': return 'Save'
 case 'editing': return 'Cancel'
 }
 }
}

過渡模式

但仍然有一個問題。嘗試點擊下面的按鈕：

當它在“開啟”按鈕和“關閉”按鈕之間轉換時，兩個按鈕都被渲染 - 一個轉換出來，而另一個轉換進來。這是<transition>的默認行為- 進入和離開同時發生。

有時候，這很有效，就像轉換項目絕對位于彼此之上一樣：

然后也可能翻譯成它們看起來像幻燈片切換：

雖然同時進入和離開轉換并不總是需要，所以Vue提供了一些替代轉換模式：

in-out：首先新元素轉換，然后完成時，當前元素轉換出來。
out-in：當前元素首先轉換出來，然后完成后，新元素轉入。

現在讓我們用out-in更新我們開/關按鈕的轉換：

<transition name="fade" mode="out-in">
 <!-- ... the buttons ... -->
</transition>

除了一個屬性外，我們已經修復了原始轉換，而無需添加任何特殊樣式。

該in-out模式并不經常使用，但有時對于稍微不同的過渡效果有用。讓我們嘗試將它與早先我們所做的幻燈片淡化轉換相結合：

（這種方法）很酷，對吧？

組件之間的轉換

組件之間的轉換甚至更簡單 - 我們甚至不需要該key屬性。相反，我們包裝一個動態組件：

<transition name="component-fade" mode="out-in">
 <component v-bind:is="view"></component>
</transition>
new Vue({
 el: '#transition-components-demo',
 data: {
 view: 'v-a'
 },
 components: {
 'v-a': {
 template: '<div>Component A</div>'
 },
 'v-b': {
 template: '<div>Component B</div>'
 }
 }
})
.component-fade-enter-active, .component-fade-leave-active {
 transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
 opacity: 0;
}

列表轉換

到目前為止，我們已經為以下方面管理過渡：

個別節點
多個節點一次僅渲染1個節點

那么當我們有一整套我們想要同時渲染的物品時，例如v-for。在這種情況下，我們將使用該<transition-group>組件。在我們深入研究一個例子之前，有幾件重要的事情要了解這個組件：

與<transition>不同的是，它呈現一個實際的元素：a <span>默認情況下。您可以更改使用該tag屬性呈現的元素。
里面的元素始終需要具有唯一的key屬性

列表輸入/離開轉場

現在我們來看一個例子，使用我們以前使用過的相同的CSS類來轉換進入和離開：

<div id="list-demo">
 <button v-on:click="add">Add</button>
 <button v-on:click="remove">Remove</button>
 <transition-group name="list" tag="p">
 <span v-for="item in items" v-bind:key="item" class="list-item">
 {{ item }}
 </span>
 </transition-group>
</div>
new Vue({
 el: '#list-demo',
 data: {
 items: [1,2,3,4,5,6,7,8,9],
 nextNum: 10
 },
 methods: {
 randomIndex: function () {
 return Math.floor(Math.random() * this.items.length)
 },
 add: function () {
 this.items.splice(this.randomIndex(), 0, this.nextNum++)
 },
 remove: function () {
 this.items.splice(this.randomIndex(), 1)
 },
 }
})
.list-item {
 display: inline-block;
 margin-right: 10px;
}
.list-enter-active, .list-leave-active {
 transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}

這個例子有一個問題。當你添加或刪除一件物品時，它周圍的物品會立即進入新位置，而不是平穩過渡。我們稍后會解決這個問題。

列表移動轉換

<transition-group>組件還有另一個竅門。它不僅可以動畫進入和離開，而且可以改變位置。您需要知道的使用此功能的唯一新概念是添加了v-move類，該類在項目更改位置時添加。像其他類一樣，它的前綴將與提供的屬性的值匹配，您也可以手動指定具有namemove-class屬性的類。

該類對于指定轉換時間和緩動曲線非常有用，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
 <button v-on:click="shuffle">Shuffle</button>
 <transition-group name="flip-list" tag="ul">
 <li v-for="item in items" v-bind:key="item">
 {{ item }}
 </li>
 </transition-group>
</div>
new Vue({
 el: '#flip-list-demo',
 data: {
 items: [1,2,3,4,5,6,7,8,9]
 },
 methods: {
 shuffle: function () {
 this.items = _.shuffle(this.items)
 }
 }
})
.flip-list-move {
 transition: transform 1s;
}

這可能看起來很神奇，但在引擎蓋下，Vue正在使用名為FLIP的動畫技術，以使用變換平滑地將元素從舊位置過渡到新位置。

我們可以將此技術與我們之前的實現結合起來，為每個可能的變化添加動畫。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
 <button v-on:click="shuffle">Shuffle</button>
 <button v-on:click="add">Add</button>
 <button v-on:click="remove">Remove</button>
 <transition-group name="list-complete" tag="p">
 <span
 v-for="item in items"
 v-bind:key="item"
 class="list-complete-item"
 >
 {{ item }}
 </span>
 </transition-group>
</div>
new Vue({
 el: '#list-complete-demo',
 data: {
 items: [1,2,3,4,5,6,7,8,9],
 nextNum: 10
 },
 methods: {
 randomIndex: function () {
 return Math.floor(Math.random() * this.items.length)
 },
 add: function () {
 this.items.splice(this.randomIndex(), 0, this.nextNum++)
 },
 remove: function () {
 this.items.splice(this.randomIndex(), 1)
 },
 shuffle: function () {
 this.items = _.shuffle(this.items)
 }
 }
})
.list-complete-item {
 transition: all 1s;
 display: inline-block;
 margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}
.list-complete-leave-active {
 position: absolute;
}

一個重要的提示是，這些FLIP轉換不適用于設置為的元素display: inline。作為替代，您可以display: inline-block在Flex上下文中使用或放置元素。

這些FLIP動畫也不限于單個軸。多維網格中的項目也可以進行轉換：

交錯列表轉換

通過通過數據屬性與JavaScript轉換進行通信，也可以在列表中錯開轉換：

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="staggered-list-demo">
 <input v-model="query">
 <transition-group
 name="staggered-fade"
 tag="ul"
 v-bind:css="false"
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:leave="leave"
 >
 <li
 v-for="(item, index) in computedList"
 v-bind:key="item.msg"
 v-bind:data-index="index"
 >{{ item.msg }}</li>
 </transition-group>
</div>
new Vue({
 el: '#staggered-list-demo',
 data: {
 query: '',
 list: [
 { msg: 'Bruce Lee' },
 { msg: 'Jackie Chan' },
 { msg: 'Chuck Norris' },
 { msg: 'Jet Li' },
 { msg: 'Kung Fury' }
 ]
 },
 computed: {
 computedList: function () {
 var vm = this
 return this.list.filter(function (item) {
 return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
 })
 }
 },
 methods: {
 beforeEnter: function (el) {
 el.style.opacity = 0
 el.style.height = 0
 },
 enter: function (el, done) {
 var delay = el.dataset.index * 150
 setTimeout(function () {
 Velocity(
 el,
 { opacity: 1, height: '1.6em' },
 { complete: done }
 )
 }, delay)
 },
 leave: function (el, done) {
 var delay = el.dataset.index * 150
 setTimeout(function () {
 Velocity(
 el,
 { opacity: 0, height: 0 },
 { complete: done }
 )
 }, delay)
 }
 }
})

可重復使用的轉換

轉換可以通過Vue的組件系統重用。要創建可重用的轉換，您只需將<transition>或<transition-group>組件放在根上，然后將所有子項傳遞給轉換組件。

以下是使用模板組件的示例：

Vue.component('my-special-transition', {
 template: '\
 <transition\
 name="very-special-transition"\
 mode="out-in"\
 v-on:before-enter="beforeEnter"\
 v-on:after-enter="afterEnter"\
 >\
 <slot></slot>\
 </transition>\
 ',
 methods: {
 beforeEnter: function (el) {
 // ...
 },
 afterEnter: function (el) {
 // ...
 }
 }
})

功能組件特別適合這項任務：

Vue.component('my-special-transition', {
 functional: true,
 render: function (createElement, context) {
 var data = {
 props: {
 name: 'very-special-transition',
 mode: 'out-in'
 },
 on: {
 beforeEnter: function (el) {
 // ...
 },
 afterEnter: function (el) {
 // ...
 }
 }
 }
 return createElement('transition', data, context.children)
 }
})

動態轉換

是的，甚至Vue中的轉換都是數據驅動的！動態轉換的最基本示例將該name屬性綁定到動態屬性。

<transition v-bind:name="transitionName">
 <!-- ... -->
</transition>

當您使用Vue的過渡類約定定義CSS過渡/動畫并希望在它們之間切換時，這會很有用。

實際上，任何轉換屬性都可以動態綁定。這不僅是屬性。由于事件掛鉤是方法，因此它們可以訪問上下文中的任何數據。這意味著取決于組件的狀態，JavaScript轉換可能會有不同的表現。

在線咨詢

上一篇：js刷新當前頁面，經測試有用
下一篇：前端要完！人工智能已經能實現自動編寫 HTML 和 CSS

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Vue 路由跳轉方法

ue路由跳轉的方式總結

不帶參

帶參

區別

您的項目需求