使用Vue Router 2實現路由功能

2021-08-07 13:31:32 字數 2084 閱讀 1564

注意：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功能請參考文件：

使用Vue Router 2實現路由功能

注意 vue router 2只適用於vue2.x版本，下面我們是基於vue2.0講的如何使用vue router 2實現路由功能。推薦使用npm安裝。npm install vue router一 使用路由 在main.js中，需要明確安裝路由功能 import vue from vue impo...

使用Vue Router 2實現路由功能

注意 vue router 2只適用於vue2.x版本，下面我們是基於vue2.0講的如何使用vue router 2實現路由功能。推薦使用npm安裝。npm install vue router一 使用路由 在main.js中，需要明確安裝路由功能 import vue from vue impo...

使用Vue Router 2實現路由功能

注意 vue router 2只適用於vue2.x版本，下面我們是基於vue2.0講的如何使用vue router 2實現路由功能。推薦使用npm安裝。npm install vue router一 使用路由 在main.js中，需要明確安裝路由功能 import vue from vue impo...