Vue之Vue Router要點(diǎn)梳理

Vue Router 是 Vue.js (opens new window) 官方的路由管理器。主要應(yīng)用于構(gòu)建單頁面應(yīng)用。

本文不會(huì)詳細(xì)介紹各種概念，主要是梳理Vue Router在使用中的知識(shí)要點(diǎn)，滿滿的干貨哦~

附Vue Router思維導(dǎo)圖一張：

一、Vue Router安裝

對(duì)于vue全家桶的項(xiàng)目，不需要再安裝Vue Router，如果項(xiàng)目里沒有集成Vue Router，可以使用以下命令，在項(xiàng)目目錄里安裝即可：

npm install vue-router --save

此處附官方文檔地址：https://router.vuejs.org/zh/，可方便查閱。

二、使用路由三步曲

1.注冊(cè)路由器: main.js

import router from './router' new Vue({ router })

2.創(chuàng)建路由器

new VueRouter({ routes: [ { // 一般路由 path: '/about', component: about }, { // 自動(dòng)跳轉(zhuǎn)路由 path: '/', redirect: '/about' } ] })

3.使用路由組件標(biāo)簽

Go to XXX

三、嵌套路由

children: [ { path: '/home/news', component: news }, { path: 'message', component: message } ]

四、向路由組件傳遞數(shù)據(jù)

（一）、params方式

方案一：

傳遞方式

routerlink傳參

路由配置

{ path: '/Test/:num', name: 'Test', component: Test }

this.$route.params.num

頁面地址：http://localhost:8083/#/Test/123

特點(diǎn)：刷新頁面仍然能獲取

方案二：

傳遞方式

push傳參

methods: { deliverParams(id) { this.$router.push({ path: `/Test/${id}` }) } }

路由配置

{ path: '/Test/:id', name: 'Test', component: Test }

this.$route.params.id

頁面地址：http://localhost:8083/#/Test/123

特點(diǎn)：刷新頁面仍然能獲取

方案三：

傳遞方式

push傳參

methods: { deliverParams(id) { this.$router.push({ name: 'Test', params: { id: id } }) } }

路由配置

{ path: '/Test/:id', name: 'Test', component: Test }

this.$route.params.id

頁面地址：http://localhost:8083/#/Test/123

特點(diǎn)：刷新頁面仍然能獲取

方案四：

傳遞方式

push傳參

methods: { deliverParams(id) { this.$router.push({ name: 'Test', params: { id: id } }) } }

路由配置

{ path: '/Test', name: 'Test', component: Test }

this.$route.params.id

頁面地址：http://localhost:8083/#/Test

特點(diǎn)：刷新頁面獲取不到

（二）、props方式

傳遞方式

hello

獲取

props: { // 聲明接受數(shù)據(jù) msg: String }, mounted() { console.log(this.msg); },

頁面地址：http://localhost:8083/#/Test

特點(diǎn)：刷新頁面仍然能獲取

（三）、query方式

方案一

傳遞方式

test

獲取

this.$route.query

頁面地址：http://localhost:8083/#/Test?zzz=123&yyy=000

特點(diǎn)：刷新頁面仍然能獲取

方案二：

傳遞方式

push傳參

獲取

this.$route.query.id

頁面地址：http://localhost:8083/#/Test?id=123

特點(diǎn)：刷新頁面仍然能獲取

五、緩存路由組件

keep-alive 是 Vue 的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。具體使用方式如下：

六、路由的編程式導(dǎo)航

1.this.$router.push(path)

相當(dāng)于點(diǎn)擊路由鏈接(可以返回到當(dāng)前路由界面)

2.this.$router.replace(path)

用新路由替換當(dāng)前路由(不可以返回到當(dāng)前路由界面)

3.this.$router.back()

請(qǐng)求(返回)上一個(gè)記錄路由

以上是我整理的vue-router使用的相關(guān)知識(shí)點(diǎn)，其中路由傳參的各種方式，如何使用，如何獲取參數(shù)，各個(gè)方式直接的特點(diǎn)，都有列出哦~

NAT Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。