Vue router你真的了解了嗎

2021-10-11 16:36:34 字數 3789 閱讀 7056

6.1 如何實現改變url的情況下頁面不進行重新整理

location.hash="***"

設定乙個值

history.pushstate({},'','')

6.2 建立路由 掌握基本的結構

在使用腳手架建立的時候使用路由,能夠在src下建立乙個route檔案,裡面的index.js來配置路由資訊,並且在main.js裡面進行匯入

在components裡面建立兩個元件

about.vue和home.vue

我是關於內容, 呵呵呵

我是首頁內容, 哈哈哈

在router/index.js檔案裡面引用這兩個路由 並且配置路由的對映

import vue from 'vue'

import router from 'vue-router'

import home from '../components/home.vue'

import about from '../components/about.vue'

//通過vue.use(外掛程式) 來進行安裝外掛程式

vue.use(router)

// 建立路由物件

export default new router(, ]

})

第二頁最後在main.js裡面設定路由的支援

import vue from 'vue'

import router from './router'

vue.config.productiontip = false

/* eslint-disable no-new */

new vue()

6.3設定預設的路由路徑
routes: [,
修改history

const routes = [, , ]

export default new router()

可以在路由裡面設定熱點的class

export default new router()
自定義元件實現路由

>

>

>

@click

="homeclick()"

>

首頁button

>

@click

="aboutclick()"

>

關於button

>

>

router-view

>

div>

div>

template

>

>

export

default

,aboutclick()

,},}

;script

>

6.4動態路由

先建立元件user

使用者

export default ;

},computed: ,

},

在index.js裡面

首頁

關於使用者

export default ;

},

6.5 懶載入

npm run build

會發現js只有三個檔案 main/使用者的/底層支撐的

所以要是用懶載入(index.js裡面),請求哪乙個路徑載入哪乙個

,,

6.6巢狀路由

首先建立兩個子元件

在index.js裡面 進行巢狀表示

,,

]},

在想對應的父元件的模板裡面進行引用

我是首頁內容, 哈哈哈

c1 c2

6.7 路由傳遞引數

第一種:

配置路由的格式

1、在index.js裡面

在位址後面傳遞引數

使用者

export default ;

},

在user.vue裡面進行顯示

使用者

export default ;

},computed: ,

},

第二種:通過query的方式進行傳遞

建立query元件

>

>

>

profilespan

>

>

姓名: }span

>

/>

>

年齡: }span

>

div>

template

>

>

export

default;}

,};script

>

在index.js裡面設定訪問的路徑

const profile = () => import('../components/profile.vue');

:to=

"}">

profilerouter-link

>

或者

profile

使用者userclick() ,

profileclick() ,

});},

補充:生命週期函式

export default ,

mounted() ,

updated()

};

全域性導航守護

在index.js裡面進行配置

const routes = [,

, children: [

}, },

}]},

},},

}];//建立乙個router物件

const router = new router()

//這個是前置鉤子

router.beforeeach((to, from, next) => )

6.8 keep-alive

內建的vue元件,可以使被包含的元件保留狀態,或者避免重新渲染,router-view是乙個元件,如果直接包在keep-alive裡面,所有路徑匹配的檢視都會被加入到快取裡面這樣就會讓元件不會被頻發的建立以及頻繁的銷毀

在home.vue裡面檢測什麼時候元件被建立,什麼時候被銷毀

activated() ,

deactivated() ,

兩個方法 include與exclude,指定包含的元件被快取,指定那些元件不被快取

ios開發之你真的了解了KVC嗎?

之前一直以為自己了解kvc 其實只是井底之蛙啦,真正的要把kvc原原本本的說出來還真的不是一件簡單的事情。於是今天寫下這邊文章,告誡自己要知其然還要知其所以然。key value coding,它是一種使用字串識別符號,間接訪問物件屬性的機制,而不是直接呼叫getter 和 setter方法。通常我...

HTTP HTTPS 你了解了嗎?

認識https之前,先來講講http存在的缺點 在一些場景,使用http沒有問題,但是在一些涉及到隱私 支付方面的問題的時候,我們就不能忽略http存在的問題。而https的出現,就是為了解決http存在的問題,那麼什麼是https?https http 加密 認證 完整性保護 可以看出https是...

web3 0你了解了嗎?

1 web2.0 1.1 什麼是2.0 定義 所謂的2.0是網際網路應用理念上和架構上的公升級,而不是簡單的某種技術的創新或者某種應用 ajax blog rss wiki,這些是web2.0?ajax只是一種一直以來都存在的應用,blog只不過是個人主頁的一種改進,rss只不過是xml中一種格式。...