vue router 在模組化 vue中的使用

2021-07-29 22:54:23 字數 2084 閱讀 4580

注意:vue-router 2只適用於vue2.x版本,下面我們是基於vue2.0講的如何使用vue-router 2實現路由功能。

推薦使用npm安裝。

npm install vue-router
一、使用路由

在main.js中,需要明確安裝路由功能:

import vue from 'vue'

import vuerouter from 'vue-router'

vue.use(vuerouter)

1.定義元件,這裡使用從其他檔案import進來

import index from './components/index.vue'

import hello from './components/hello.vue'

2.定義路由

const routes = [,,

]

3.建立 router 例項,然後傳 routes 配置

const router = new vuerouter()
4.建立和掛載根例項。通過 router 配置引數注入路由,從而讓整個應用都有路由功能

router,

index.html裡呢要這樣寫:

二、重定向 redirect

const routes = [

, // 這樣進/ 就會跳轉到/index

]

三、巢狀路由

const routes = []}

]

通過/index/info就可以訪問到info元件了

四、懶載入

const routes = [,,

]

通過懶載入就不會一次性把所有元件都載入進來,而是當你訪問到那個元件的時候才會載入那乙個。對於元件比較多的應用會提高首次載入速度。

五、

在vue-router 1中,使用的是

在vue-router 2中,使用了替換1版本中的a標籤

home

home

home

home

home

user

register

六、路由資訊物件

1.$route.path

字串,對應當前路由的路徑,總是解析為絕對路徑,如 "/foo/bar"。

2.$route.params

乙個 key/value 物件,包含了 動態片段 和 全匹配片段,如果沒有路由引數,就是乙個空物件。

3.$route.query

乙個 key/value 物件,表示 url 查詢引數。例如,對於路徑 /foo?user=1,則有 $route.query.user == 1,如果沒有查詢引數,則是個空物件。

4.$route.hash

當前路由的 hash 值 (不帶 #) ,如果沒有 hash 值,則為空字串。

5.$route.fullpath

完成解析後的 url,包含查詢引數和 hash 的完整路徑。

6.$route.matched

乙個陣列,包含當前路由的所有巢狀路徑片段的 路由記錄 。路由記錄就是 routes 配置陣列中的物件副本(還有在 children 陣列)。

綜合上述,乙個包含重定向、巢狀路由、懶載入的main.js如下:

import vue from 'vue'

import vuerouter from 'vue-router'

vue.use(vuerouter)

const router = new vuerouter(,]},

,]})

router,

更詳細的vue-router功能請參考文件:

什麼是模組化?模組化的好處

1.高內聚低耦合,有利於團隊作戰,當專案很複雜的時候,將專案劃分為子模組分給不同的人開發,最後再組合在一起,這樣可以降低模組與模組之間的依賴關係體現低耦合,模組又有特定功能體現高內聚。2.可重用,方便維護,模組的特點就是有特定功能,當兩個專案都需要某種功能的時候,我們定義乙個特定的模組來實現該功能,...

什麼是模組化?模組化怎麼實現?

前言 增加印象,留下腳印 忘記還可以翻一翻 奧利給。1,什麼是模組化 公司裡乙個專案是有很多程式設計師一起開發的,例如 多人運動 這個專案 有程式設計師a 程式設計師b 程式設計師c 程式設計師a 寫了 aaa.js 裡面有幾千行 幾萬行 程式設計師b 寫了 bbb.js 裡面有幾千行 幾萬行 程式...

什麼是模組化?模組化的好處

什麼是模組化?j a 應用架構設計 模組化模式與 osgi 一書中對它的定義是 模組化是一種處理複雜系統分解為更好的可管理模組的方式。所謂的模組化開發就是封裝細節,提供使用介面,彼此之間互不影響,每個模組都是實現某一特定的功能。模組化開發的基礎就是函式。模組化開發使 耦合度降低,模組化的意義在於最大...