Vue.js 是一個強大的前端框架，提供了豐富的功能來幫助開發者構建復雜的單頁應用（SPA）。本文將詳細介紹 Vue.js 中的自定義指令和路由管理及導航守衛。通過這些功能，你可以更好地控制視圖行為和應用導航，從而提升用戶體驗和開發效率。

1 自定義指令詳解

1.1 什么是自定義指令？

自定義指令是 Vue.js 提供的一種機制，允許你在 DOM 元素上綁定特定的行為。自定義指令可以用來操作 DOM、處理事件、設置樣式等。

1.2 創建自定義指令

在 Vue 中，可以通過全局或局部的方式創建自定義指令。

1.2.1 全局指令

全局指令可以在整個應用中使用。

Vue.directive('focus', {// 當被綁定的元素插入到 DOM 中時調用inserted(el) {el.focus();}
});

1.2.2 局部指令

局部指令只能在當前組件中使用。

export default {directives: {focus: {inserted(el) {el.focus();}}}
};

1.3 指令鉤子函數

指令對象可以提供幾個鉤子函數，用于在不同階段執行不同的邏輯。

• bind: 只調用一次，指令第一次綁定到元素時調用。
• inserted: 被綁定元素插入父節點時調用（僅保證父節點存在，但不一定已被插入文檔中）。
• update: 所在組件的 VNode 更新時調用。
• componentUpdated: 指令所在組件的 VNode 及其子 VNode 全部更新后調用。
• unbind: 只調用一次，指令與元素解綁時調用。

示例：完整的自定義指令

Vue.directive('highlight', {bind(el, binding, vnode) {el.style.backgroundColor = binding.value;},update(el, binding) {el.style.backgroundColor = binding.value;},unbind(el) {el.style.backgroundColor = '';}
});// 使用
<template><div v-highlight="'yellow'">This is a highlighted text.</div>
</template>

1.4 指令參數

自定義指令還可以接受參數，以便更靈活地控制行為。

Vue.directive('pin', {bind(el, binding) {el.style.position = 'fixed';el.style[binding.arg] = binding.value + 'px';}
});// 使用
<template><div v-pin.right="100" v-pin.top="50">Pinned Element</div>
</template>

1.5 動態指令

自定義指令也可以接收動態值。

<template><div v-highlight:[dynamicValue]="color">Dynamic Highlight</div>
</</