推薦大家安裝的 VScode 中的 Vue 插件

Vue 3 Snippets Vue 3 Snippets - Visual Studio Marketplace

Vetur Vetur - Visual Studio Marketplace

什么是 vue

構(gòu)建用戶界面

• 用 vue 往 html 頁面中填充數(shù)據(jù)，非常的方便

框架

• 框架是一套現(xiàn)成的解決方案，程序員只能遵守框架的規(guī)范，去編寫自己的業(yè)務功能！

• 要學習 vue，就是在學習 vue 框架中規(guī)定的用法！

• vue 的指令、組件（是對 UI 結(jié)構(gòu)的復用）、路由、Vuex、vue 組件庫

• 只有把上面老師羅列的內(nèi)容掌握以后，才有開發(fā) vue 項目的能力！

vue 的兩個特性

數(shù)據(jù)驅(qū)動視圖：

• 數(shù)據(jù)的變化會驅(qū)動視圖自動更新

• 好處：程序員只管把數(shù)據(jù)維護好，那么頁面結(jié)構(gòu)會被 vue 自動渲染出來！

雙向數(shù)據(jù)綁定：

在網(wǎng)頁中，form 表單負責采集數(shù)據(jù)，Ajax 負責提交數(shù)據(jù)。

• js 數(shù)據(jù)的變化，會被自動渲染到頁面上

• 頁面上表單采集的數(shù)據(jù)發(fā)生變化的時候，會被 vue 自動獲取到，并更新到 js 數(shù)據(jù)中

注意：數(shù)據(jù)驅(qū)動視圖和雙向數(shù)據(jù)綁定的底層原理是 MVVM（Mode 數(shù)據(jù)源、View 視圖、ViewModel 就是 vue 的實例）

vue 指令

1. 內(nèi)容渲染指令 (用來輔助開發(fā)者渲染DOM元素的文本類容)

v-text 指令的缺點：會覆蓋元素內(nèi)部原有的內(nèi)容！

{{ }} 插值表達式：在實際開發(fā)中用的最多，只是內(nèi)容的占位符，不會覆蓋原有的內(nèi)容！

v-html 指令的作用：可以把帶有標簽的字符串，渲染成真正的 HTML 內(nèi)容！

2. 屬性綁定指令

注意：插值表達式只能用在元素的內(nèi)容節(jié)點中，不能用在元素的屬性節(jié)點中！

• 在 vue 中，可以使用 v-bind: 指令，為元素的屬性動態(tài)綁定值；

• 簡寫是英文的 :

• 在使用 v-bind 屬性綁定期間，如果綁定內(nèi)容需要進行動態(tài)拼接，則字符串的外面應該包裹單引號，例如：

  <div :title="'box' + index">這是一個 div</div>

3. 事件綁定

v-on: 簡寫是 @

語法格式為：

<button @click="add"></button> ? methods: {add() {// 如果在方法中要修改 data 中的數(shù)據(jù)，可以通過 this 訪問到this.count += 1} }

$event 的應用場景：如果默認的事件對象 e 被覆蓋了，則可以手動傳遞一個 $event。例如：

<button @click="add(3, $event)"></button> ? methods: {add(n, e) {// 如果在方法中要修改 data 中的數(shù)據(jù)，可以通過 this 訪問到this.count += 1} }

事件修飾符：

• .prevent 阻止事件默認行為

  <a @click.prevent="xxx">鏈接</a>

• .stop 阻止冒泡

  <button @click.stop="xxx">按鈕</button>

4. v-model 指令（雙向綁定指令）

input 輸入框

• type="radio"

• type="checkbox"

• type="xxxx"

textarea

select

v-model指令的修飾符

• .number 自動將用戶的輸入值轉(zhuǎn)換為數(shù)值類型

  <input v-model.number="age" />

• .trim 自動過濾用戶輸入的首尾空白字符

  <input v-model.trim="msg" />

• .lazy 在“ change ” 時而非“ input ” 時更新

  <input v-model.lazy="msg" />

5. 條件渲染指令

v-show 的原理是：動態(tài)為元素添加或移除 display: none 樣式，來實現(xiàn)元素的顯示和隱藏

• 如果要頻繁的切換元素的顯示狀態(tài)，用 v-show 性能會更好

v-if 的原理是：每次動態(tài)創(chuàng)建或移除元素，實現(xiàn)元素的顯示和隱藏

• 如果剛進入頁面的時候，某些元素默認不需要被展示，而且后期這個元素很可能也不需要被展示出來，此時 v-if 性能更好

在實際開發(fā)中，絕大多數(shù)情況，不用考慮性能問題，直接使用 v-if 就好了！！！

v-if 指令在使用的時候，有兩種方式：

直接給定一個布爾值 true 或 false

<p v-if="true">被 v-if 控制的元素</p>

給 v-if 提供一個判斷條件，根據(jù)判斷的結(jié)果是 true 或 false，來控制元素的顯示和隱藏

<p v-if="type === 'A'">良好</p>

6.列表渲染指令

v-for指令需要使用 item in items 的形式的特殊語法

items是待循環(huán)的數(shù)組 item是被循環(huán)的每一項

data:{list:[{id:1,name:'zs'},{id:2,name:'ls'} ] } ? <ul><li v-for="item in list">姓名是:{{item.name}}</li> </ul>

v-for指令還支持一個可選的第二個參數(shù)，即當前項的索引。 語法格式為(item,index)in items.

3.官方建議：只要用到了v-for指令，那么一定要綁定一個：key屬性，而且盡量把Id作為key的值

4.官方對于key的類型是有要求的：字符串或數(shù)字類型。 key值不能重復，必須具有唯一性

過濾器

過濾器的注意點

要定義到 filters 節(jié)點下，本質(zhì)是一個函數(shù)

在過濾器函數(shù)中，一定要有 return 值

在過濾器的形參中，可以獲取到“管道符”(|)前面待處理的那個值

如果全局過濾器和私有過濾器名字一致，此時按照“就近原則”，調(diào)用的是”私有過濾器“

watch 偵聽器

偵聽器的格式

方法格式的偵聽器

• 缺點1：無法在剛進入頁面的時候，自動觸發(fā)！！！

• 缺點2：如果偵聽的是一個對象，如果對象中的屬性發(fā)生了變化，不會觸發(fā)偵聽器！！！

對象格式的偵聽器

• 好處1：可以通過 immediate 選項，讓偵聽器自動觸發(fā)！！！

• 好處2：可以通過 deep 選項，讓偵聽器深度監(jiān)聽對象中每個屬性的變化！！！

watch偵聽器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作

<div id="app"><input type="text" v-model="username"></div><script>const vm = new Vue({el: '#app',data: {username: 'admin'},// 所有的偵聽器，都應該被定義到 watch 節(jié)點下watch: {// 偵聽器本質(zhì)上是一個函數(shù)，要監(jiān)視哪個數(shù)據(jù)的變化，就把數(shù)據(jù)名作為方法名即可// 新值在前，舊值在后username(newVal,oldVal) {console.log(newVal,oldVal)}}})</script>

計算屬性

定義到computed中

特點：

定義的時候，要被定義為“方法”

在使用計算屬性的時候，當普通的屬性使用即可

好處：

實現(xiàn)了代碼的復用

只要計算屬性中依賴的數(shù)據(jù)源變化了，則計算屬性會自動重新求值！

axios

axios 是一個專注于網(wǎng)絡請求的庫！

axios 的基本使用

發(fā)起 GET 請求：

axios({// 請求方式method: 'GET',// 請求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查詢參數(shù)params: {id: 1} }).then(function (result) {console.log(result) })

發(fā)起 POST 請求：

document.querySelector('#btnPost').addEventListener('click', async function () {// 如果調(diào)用某個方法的返回值是 Promise 實例，則前面可以添加 await！// await 只能用在被 async “修飾”的方法中const { data: res } = await axios({method: 'POST', url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}}) ?console.log(res) })

vue-cli 的使用

在終端下運行如下的命令，創(chuàng)建指定名稱的項目：

vue cerate 項目的名稱

vue 項目中 src 目錄的構(gòu)成：

? assets 文件夾：存放項目中用到的靜態(tài)資源文件，例如：css 樣式表、圖片資源 components 文件夾：程序員封裝的、可復用的組件，都要放到 components 目錄下 main.js 是項目的入口文件。整個項目的運行，要先執(zhí)行 main.js App.vue 是項目的根組件。

vue組件

---

1.介紹與使用

• 組件在被封裝好之后，彼此之間是相互獨立的，不存在父子關(guān)系。

• 在使用組件的時候，根據(jù)彼此的嵌套關(guān)系，形成父子關(guān)系，兄弟關(guān)系。

• 使用組件的三個步驟

• 使用import語法導入需要的組件

  import left from '@/components/left.vue'

• 使用components節(jié)點注冊組件 （通過components注冊的是私有組件）

  export default{compoments:{left} }

• 以標簽形式使用剛才注冊的組件

  <div class="box"><left></left> </div>

2.注冊全局組件

在vue項目的 main.js 入口文件中，通過 vue.components() 方法，可以注冊全局組件。如下

//導入需要被注冊的組件 import Count from '@/components/Count.vue'//參數(shù)1：字符串格式，表示組件的“注冊名稱” //參數(shù)2：需要被全局注冊的那個組件Vue.components('MyCount','Count')

3.組件中的props

• props是組件的自定義屬性，在封裝通用組件的時候，合理地使用props可以極大地提高組件的復用性！

  export default{//組件的自定義屬性props:['自定義屬性A','自定義屬性B','其他自定義屬性...'],//組件的私有數(shù)據(jù)data(){return{}} }

• props中的數(shù)據(jù)，可以直接在模板結(jié)構(gòu)中使用

• props是只讀的，不能直接修改props的值,想要修改props的值，可以吧props的值轉(zhuǎn)存到data中(data中的數(shù)據(jù)都是可讀可寫的！)

  export default{//組件的自定義屬性props:['自定義屬性A','自定義屬性B','其他自定義屬性...'],//組件的私有數(shù)據(jù)data(){return{count:this.init}} }

• 在聲明自定義屬性時，可以通過default來定義屬性的默認值。例如：

  export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認值default:0}} }

4.props的type值類型

• 在聲明自定義屬性時，可以通過type來定義屬性的值類型

  export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認值default:0,//如果傳遞過來的值不符合此類型，則會在終端報錯type:Number}} }

5.required必填項

export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認值default:0,//如果傳遞過來的值不符合此類型，則會在終端報錯type:Number,//必填校驗項,如果不傳init 則終端報錯 required:true}} }

6.組件之間的樣式?jīng)_突問題

默認情況下，寫在.vue組件中的樣式會全局生效,因此會造成多個組件之間的樣式?jīng)_突問題.

根本原因：

單頁面應用程序中，所有組件的DOM結(jié)構(gòu)，都是基于唯一的index.html頁面進行呈現(xiàn)的

每個組件中的樣式，都會影響整個index.html頁面中的DOM元素

組件的生命周期

---

1.生命周期&生命周期函數(shù)

• 生命周期（Life Cycle）是指一個組件從創(chuàng)建->運行->銷毀的整個階段，強調(diào)的是一個時間段。

• 生命周期函數(shù)：是由Vue框架提供的內(nèi)置韓式，會伴隨著組件的生命周期，自動按次序執(zhí)行。

• ?

  ?

• <template><div class="test-container"><h3 id="myh3">Test.vue 組件 --- {{ books.length }} 本圖書</h3><p id="pppp">message 的值是：{{ message }}</p><button @click="message += '~'">修改 message 的值</button></div> </template><script> export default {props: ["info"],data() {return {message: "hello vue.js",// 定義 books 數(shù)組，存儲的是所有圖書的列表數(shù)據(jù)。默認為空數(shù)組！books: [],};},watch: {message(newVal) {console.log("監(jiān)視到了 message 的變化：" + newVal);},},methods: {show() {console.log("調(diào)用了 Test 組件的 show 方法！");},// 使用 Ajax 請求圖書列表的數(shù)據(jù)initBookList() {const xhr = new XMLHttpRequest();xhr.addEventListener("load", () => {const result = JSON.parse(xhr.responseText);console.log(result);this.books = result.data;});xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");xhr.send();},},// 創(chuàng)建階段的第1個生命周期函數(shù)beforeCreate() {// console.log(this.info)// console.log(this.message)// this.show()},created() {// created 生命周期函數(shù)，非常常用。// 經(jīng)常在它里面，調(diào)用 methods 中的方法，請求服務器的數(shù)據(jù)。// 并且，把請求到的數(shù)據(jù)，轉(zhuǎn)存到 data 中，供 template 模板渲染的時候使用！this.initBookList();},beforeMount() {// console.log('beforeMount')// const dom = document.querySelector('#myh3')// console.log(dom)},// 如果要操作當前組件的 DOM，最早，只能在 mounted 階段執(zhí)行mounted() {// console.log(this.$el)// const dom = document.querySelector('#myh3')// console.log(dom)},beforeUpdate() {// console.log('beforeUpdate')// console.log(this.message)// const dom = document.querySelector('#pppp')// console.log(dom.innerHTML)},// 當數(shù)據(jù)變化之后，為了能夠操作到最新的 DOM 結(jié)構(gòu)，必須把代碼寫到 updated 生命周期函數(shù)中updated() {// console.log('updated')// console.log(this.message)// const dom = document.querySelector('#pppp')// console.log(dom.innerHTML)},beforeDestroy() {console.log("beforeDestroy");this.message = "aaa";console.log(this.message);},destroyed() {console.log("destroyed");// this.message = 'aaa'}, }; </script><style lang="less" scoped> .test-container {background-color: pink;height: 200px; } </style>

2.組件之間的數(shù)據(jù)共享

• 組件之間的關(guān)系（常見關(guān)系）

• 父子關(guān)系

• 兄弟關(guān)系

• 組件之間的數(shù)據(jù)共享

  1.父組件向子組件共享數(shù)據(jù)需要使用自定義屬性。

  2.子組件向父組件共享數(shù)據(jù)需要使用自定義事件。

• 兄弟組件之間的數(shù)據(jù)共享

  在vue.2x中，兄弟組件之間數(shù)據(jù)共享的方案是EventBus

  EventBus 的使用步驟

• 創(chuàng)建eventBus.js模塊，并向外共享一個Vue的實力對象

• 在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit 方法觸發(fā)自定義事件

• 在數(shù)據(jù)接收方，調(diào)用 bus.$on 方法注冊一個自定義事件

?

ref引用

1.ref引用DOM

ref用來輔助開發(fā)者在不依賴jQuery的情況下，獲取DOM元素或組件的引用

<p ref="myp"></p>export default{methods:{this.$refs.myp.style.color = 'red'} }

2.ref引用組件實例

可以用this.$refs.引用的名稱 來引用組件的實例

3.this.$nextTick(cb)方法

組件的$nextTick(cb) 方法，會把cb回調(diào)推遲到下一個DOM更新周期之后執(zhí)行。

通俗的理解是：等組件的DOM更新完成之后，在執(zhí)行cb回調(diào)函數(shù)。從而能保證cb 回調(diào)函數(shù)可以操作到最新的DOM元素。

動態(tài)組件

1.實現(xiàn)動態(tài)組件渲染

vue提供了一個內(nèi)置的<component>組件，專門用來渲染實現(xiàn)動態(tài)組件的渲染

<template><div class="app-container"><h1>App 根組件</h1><hr /><button @click="comName = 'Left'">left</button><button @click="comName = 'Right'">right</button><div class="box"><!-- 渲染 Left 組件和 Right 組件 --><component :is="comName"></component></div></div> </template><script> import Left from "@/components/Left.vue"; import Right from "@/components/Right.vue"; export default {data() {return {comName: "",};},components: {Left,Right,}, }; </script>

2.使用keep-alive 保持狀態(tài)

keep-alive 可以把內(nèi)部的組件進行緩存，而不是銷毀組件

<keep-alive><component :is="comName"></component> </keep-alive>

3. keep-alive 對應的生命周期函數(shù)

當組件被緩存時，會自動觸發(fā)組件的deactivated 生命周期函數(shù)

當組件被激活時，對自動觸發(fā)組件的activated 生命周期函數(shù)

4. keep-alive 的include屬性

<keep-alive include="Left,Right"> //指定哪些組件需要被緩存 <component :is="comName"></component> </keep-alive>

插槽

1.什么是插槽

插槽（slot）是vue為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時，把不確定的、希望用戶指定的部分定義為插槽。

?

vue官方規(guī)定：每一個 slot 插槽，都要有一個 name 名稱

如果省略了 slot 的 name 屬性，則有一個默認名稱叫做 default

2.v-slot指令

1. 如果要把內(nèi)容填充到指定名稱的插槽中，需要使用 v-slot：這個指令 2. v-slot：后面要跟上插槽的名字 3. v-slot：指令不能用在元素身上，必須用在template標簽上 4. template這個標簽，它是一個虛擬標簽，只起到包裹性的作用 5. v-slot的簡寫是#

3.后備內(nèi)容

封裝組件時，可以為預留的<slot>插槽提供后備內(nèi)容。如果組件的使用者沒有為插槽提供任何內(nèi)容，則后備內(nèi)容會生效。

4.作用域插槽

在封裝組件時，為預留的<slot>提供屬性對應的值，這種用法，叫做 “ 作用域插槽 ”。

<Left><template #con="obj"><h3>pppppp</h3><p>{{ obj.msg }}</p></template></Left><slot name="con" msg="hello"> </slot>

自定義指令

1.vue中的自定義指令分為兩類

• 私有自定義指令

• 全局自定義指令

2.私有自定義指令

在每個vue組件中，可以在directives節(jié)點下聲明私有自定義指令。

//私有指令節(jié)點directives: {color: {bind(el) {el.style.color = "red";// console.log(111);},},}

3.鉤子函數(shù)

指令定義函數(shù)提供了幾個鉤子函數(shù)（可選）：

• bind: 只調(diào)用一次，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作。

• inserted: 被綁定元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用，不必存在于 document 中）。

• update: 被綁定元素所在的模板更新時調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數(shù)參數(shù)見下）。

• componentUpdated: 被綁定元素所在模板完成一次更新周期時調(diào)用。

• unbind: 只調(diào)用一次， 指令與元素解綁時調(diào)用。

接下來我們來看一下鉤子函數(shù)的參數(shù) (包括 el，binding，vnode，oldVnode) 。

鉤子函數(shù)被賦予了以下參數(shù)：

• el: 指令所綁定的元素，可以用來直接操作 DOM 。

• binding

  : 一個對象，包含以下屬性：

  • name: 指令名，不包括 v- 前綴。

  • value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。

  • oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

  • expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

  • arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。

  • modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。

• vnode: Vue 編譯生成的虛擬節(jié)點，查閱 VNode API 了解更多詳情。

• oldVnode: 上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數(shù)都應該是只讀的，盡量不要修改他們。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進行。

一個使用了這些參數(shù)的自定義鉤子樣例：

<div id="hook-arguments-example" v-demo:hello.a.b="message"></div> Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')} })new Vue({el: '#hook-arguments-example',data: {message: 'hello!'} })

name: "demo" value: "hello!" expression: "message" argument: "hello" modifiers: {"a":true,"b":true} vnode keys: tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, child, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce

4.函數(shù)簡寫

大多數(shù)情況下，我們可能想在 bind 和 update 鉤子上做重復動作，并且不想關(guān)心其它的鉤子函數(shù)。可以這樣寫:

Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value })

5.對象字面量

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數(shù)能夠接受所有合法類型的 Javascript 表達式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!" })

路由

1.前端路由的工作方式

用戶點擊了頁面上的路由鏈接

導致URl地址欄中的Hash值發(fā)生了變化

前端路由監(jiān)聽到了Hash地址變化

前端路由把當前的 Hash 地址對應的組件渲染到瀏覽器中

?

2.底層原理

利用 windows.onhashchange 來監(jiān)聽hash地址的變化，綁定動態(tài)組件實現(xiàn)路由效果

3.路由配置安裝

//導入Vue和 VueRouter 的包 import Vue from 'vue' import VueRouter from 'vue-router' //調(diào)用Vue.use()函數(shù)，把VueRouter 安裝為 Vue 的插件 Vue.use(VueRouter)//創(chuàng)建路由的實例對象 const rooter = new VueRouter()//向外共享 export default rooter //main.js import Vue from 'vue' import App from './App.vue' //導入路由模塊，拿到實例對象//在進行模塊導入的時候，如果給定的是文件夾，則默認導入這個文件夾下，名字叫做index.js的文件import router from '@/router/index.js'// 導入 bootstrap 樣式 import 'bootstrap/dist/css/bootstrap.min.css' // 全局樣式 import '@/assets/global.css'Vue.config.productionTip = falsenew Vue({render: h => h(App),//把路由實例對象掛載router: router }).$mount('#app')

4.路由的重定向

路由的重定向指的是：用戶在訪問地址A的時候，強制用戶跳轉(zhuǎn)到地址C，從而展示特定的組件頁面。通過路由規(guī)則的redirect屬性，指定一個新的路由地址，可以很方便地設置路由的重定向。

const router = new VueRouter({routes: [//當用戶訪問 / 的時候，通過redirect 屬性跳轉(zhuǎn)到 /home 對應的路由規(guī)則{path:'/',redirect:'/home'},{ path: '/home', component: Home },{ path: '/movie', component: Movie },{ path: '/about', component: About }] })

5.嵌套路由

通過children 屬性聲明子路由規(guī)則

//index.js{path: '/about',component: About,redirect: '/about/tab1',//子路由規(guī)則children: [{ path: 'tab1', component: Tab1 },{ path: 'tab2', component: Tab2 }]} //about.vue<router-link to="/about/tab1">Tab1</router-link><router-link to="/about/tab2">Tab2</router-link><hr /><router-view></router-view>

默認子路由：如果 children 數(shù)組中，某個路由規(guī)則的 path 值為空字符串，則這條路由規(guī)則，叫做 “ 默認子路由 ”

6.動態(tài)路由匹配

動態(tài)路由匹配 | Vue Router

{ path: 'userinfo/:id', component: UserDetail, props: true } //動態(tài)參數(shù)項 props傳值

7.聲明式導航&編程式導航

1.在瀏覽器中，點擊鏈接實現(xiàn)導航的方式，叫做聲明式導航。

2.在瀏覽器中，調(diào)用API方法實現(xiàn)的導航的方式，叫做編程式導航。例如

在普通網(wǎng)頁中調(diào)用location.href跳轉(zhuǎn)到新頁面的方式，屬于編程式導航。

vue-router 中的編程式導航API

this.$router.push('hash地址')

跳轉(zhuǎn)到指定的地址，并增加一條瀏覽記錄

this.$router.replace('hash地址')

跳轉(zhuǎn)到指定的地址，并替換掉當前的瀏覽記錄

this.$router.go(數(shù)值n)

可以在瀏覽歷史中前進和后退

如果前進、后退的層數(shù)超過最大限制，則原地不動

this.$router 的簡化用法

$router.back() $router.forward()

導航守衛(wèi)

1.全局前置守衛(wèi)

每次發(fā)生路由的導航跳轉(zhuǎn)時，都會觸發(fā)全局前置守衛(wèi)。因此，在全局前置守衛(wèi)中，程序員可以對每個路由進行訪問權(quán)限的控制：

const router = new VueRouter({...})//調(diào)用路由實例對象的 beforeEach 方法，即可聲明“全局前置守衛(wèi)” //每次發(fā)生路由跳轉(zhuǎn)的時候，都會自動觸發(fā) fn 這個“回調(diào)函數(shù)” router.beforeEach(fn)

2.回調(diào)函數(shù)中接受的三個實參

router.beforeEach((to,from,next)=>{//to 是將要訪問的路由的信息對象//from 是將要離開的路由的信息對象//next 是一個函數(shù)，調(diào)用next()表示放行，允許這次路由導航 })

?

總結(jié)

以上是生活随笔為你收集整理的Vue2学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。