注意:vue-router 2只適用於vue2.x版本,下面我們是基於vue2.0講的如何使用vue-router 2實現路由功能。
推薦使用npm安裝。
npm install vue-router
一、使用路由
在main.js中,需要明確安裝路由功能:
1.定義元件,這裡使用從其他檔案import進來import vue from 'vue'
import vuerouter from 'vue-router'
vue.use(vuerouter)
2.定義路由import index from './components/index.vue'
import hello from './components/hello.vue'
3.建立 router 例項,然後傳 routes 配置const routes = [,,
]
const router = new vuerouter()
4.建立和掛載根例項。通過 router 配置引數注入路由,從而讓整個應用都有路由功能
router,
index.html裡呢要這樣寫:
二、重定向 redirect
三、巢狀路由const routes = [
, // 這樣進/ 就會跳轉到/index
]
通過/index/info就可以訪問到info元件了const routes = []}
]
四、懶載入
通過懶載入就不會一次性把所有元件都載入進來,而是當你訪問到那個元件的時候才會載入那乙個。對於元件比較多的應用會提高首次載入速度。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如下:
更詳細的vue-router功能請參考文件:import vue from 'vue'
import vuerouter from 'vue-router'
vue.use(vuerouter)
const router = new vuerouter(,]},
,]})
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...