vue中router以及route的使用
阿新 • • 發佈:2018-12-17
路由基本概念
- route,它是一條路由。
{ path: '/home', component: Home }
- routes,是一組路由。
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
- router可以理解為一個容器,或者說一種機制,它管理了一組route。簡單來說,route只是進行了URL和函式的對映,而在當接收到一個URL之後,去路由對映表中查詢相應的函式,這個過程是由router來處理的。
const router = new VueRouter({ routes // routes: routes 的簡寫 })
VUE中
- $route為當前router跳轉物件裡面可以獲取name、path、query、params等。
- $router為VueRouter例項,想要導航到不同URL,則使用$router.push方法,返回上一個history使用$router.go方法。跟上面說的一樣,這裡的$router就管理路由的跳轉,英文裡er結尾的都表示一種人,這裡你可以把這個想象中一個管理者,他來控制路由去哪裡(push、go),這樣就比較容易記。
路由跳轉
- 1 可以手寫完整的path:
this.$router.push({path:`/user/${userId}`})
這種方式需要在路由中作如下配置
{
path: '/user/:userId',
name: '***',
component: ***
}
這種接收引數的方式是this.$route.params.userId。
- 2 也可以用params傳遞:
this.$router.push({name:'Login',params:{id:'leelei'}})
//不帶引數 變成 ip/login
- 3 也可以用query傳遞:
this.$router.push({path:'/login',query:{id:'leelei'}) //帶查詢引數變成 ip/login?id=leelei //帶斜槓/代表從根目錄出發,不會巢狀之前的路徑
query傳參是針對path的,params傳參是針對name的。。接收引數的方式都差不多。。this.$route.query.和this.$route.params.
注意這只是跳轉url,跳轉到這個url顯示什麼元件,得配置路由。router跳轉和<router-link>標籤跳轉,規則差不多。
一些需要注意的事
- 使用query傳參的話,會在瀏覽器的url欄看到傳的引數類似於get請求,使用params傳參的話則不會,類似於post請求。
- 如果提供了path,params將會被忽略(即如果要使用params傳參,則一定要使用name),但是query不屬於這種情況。如果使用完整路徑和query傳參,重新整理頁面時不會造成路由傳參的引數丟失。
- router.push和router.replace的區別是:replace不會向 history 新增新記錄,而是替換掉當前的 history 記錄,即使用replace跳轉到的網頁‘後退’按鈕不能點選。
最後
謝謝大家,如果有錯誤的地方請指出。