Vue學習12箭頭函式 vue router

2022-07-02 12:06:09 字數 2179 閱讀 1466

es6中的肩頭函式:

const cc = (引數列表)=>{}
例如:乙個引數的時候括號可以省略掉

const power = num =>
函式中沒有引數的時候

const test = () =>
函式中還有一行**的時候:

const mul = (num1,num2)=>num1 * num2
什麼時候用箭頭函式比較多?打算把乙個函式作為另外乙個函式引數的時候一般會使用箭頭函式。

箭頭函式中的this引用的最近作用域中的this。也就是說使用:

aaa())
然後為了能在main中使用需要在這個檔案裡匯出然後在main中匯入:

下面是main.js中

所以生成的**就是這些意思。

那麼如何配置路由的對映關係呢?

1.建立乙個路由元件 2.配置路由對映 3.使用路由

首先我們先建立乙個路由元件:

這個是about.vue中的內容,同時我們建立另乙個home.vue內容和這個一樣的只是文字顯示的是首頁。這樣我們路由的元件就建立完了一會就顯示他倆。

然後我們配置路由對映,既然是配置那麼就在router中的index配置一下:

引包:配置:

可以看到並沒有增加太多的東西,就是path後面跟上url要增加的資訊,然後告訴路由path變動後顯示哪乙個元件,這裡分別顯示home元件和about元件。

router-link標籤中的to對應path內容,然後一定要放置下面的router-view標籤,這個標籤決定內容在**顯示,效果如下:

點選就可以切換了,

可以看到url中的內容也改變了。

那麼我們希望主頁的內容應該是預設顯示的,而不是點選一下才能顯示,這時候需要設定乙個重定向:在配置路由的地方我們新增乙個:

第乙個就是我們新新增的重定向,也就是預設重定向到home,/代表根路徑。這樣就實現了。再改一下url的模式,模式改成history這樣不是顯示hash模式了,那樣看起來太傻了。

這回就像個url了沒井號了。

router-link的補充:

增加乙個tag屬性可以更改渲染之後的標籤是什麼標籤。

不希望使用者進行返回,新增乙個repalce屬性

新增active-class="active",可以修改css樣式:

效果:通過點選按鈕進行改變的方法:

先設定兩個按鈕:

首頁

關於

然後對應函式設定上:

export default )

},aboutclick())}}}

這裡通過this.$router.replace來更改了路徑,this代表當前元件,$router是乙個屬性源自vue-router的原始碼裡面,所有的元件都加入了這個$router的屬性,這個屬性還有push()方法或者replace方法一類的,這樣你點選就可以跳轉了。這樣其他標籤也是可以的。

VUE 儲備 箭頭函式

arrow fn不具備this,arguments 沒有this會找上一級的this 1 如何更改this指向 2 var that this 3 2 如何確定this是誰 看是誰呼叫的,前面是誰,this就是誰 1 function a b 45 let a b 6 去掉function,引數如果...

學習筆記 箭頭函式

1.箭頭函式寫法 1個引數 var fn x x x alert fn 2 4 es5寫法 var fn1es5 function x 2.箭頭寫法 2個引數 var fn2 x,y x y alert fn2 4,4 16 es5寫法 var fn2es5 function x,y 3.箭頭寫法 ...

vue學習筆記es6中的箭頭函式

箭頭函式 是一種定義函式的方式 當我們需要把乙個函式作為返回值傳給乙個函式時通常會用到箭頭函式 兩個引數 const sum num1,num2 乙個引數的時候是可以省略括號的 const fun num const fun2 num 函式中的 情況2 多行 const test 一行 const ...