vue路由復習(轉載)
我的github iSAM2016
目錄
- 響應路由參數的變化
- 嵌套路由
- 函數式導航
- 路由的命名
- 示例:切換路由的時候可以修改頁面的標題
- 導航鉤子
- 全局鉤子
- 實例:檢測用戶登錄
- 全局鉤子
- 路由元信息
- 路由對象信息
- Router 實例
- $router.options
中途有一段時間去隔壁家的php玩了一遭,回頭看來,vuex、vue-router有了改變,一開始就對vue-route的細節不是很了解,今天總結一下。
官網的例子:
自己的一句話:
-
定義路由組件(汽車)
const Foo = { template: ‘
const Bar = { template: ‘ bar ‘ -
定義路由(公路或導航)
cost ruter = {
{ path: ‘/foo‘, component: Foo },
{ path: ‘/bar‘, component: Bar }
} -
創建實例(紅路燈)
cosnt app = new Vue({
router}).$mount(‘#app‘)
動態的路由匹配
一個頁面是經常重復使用的,傳遞一個參數就可以了,比如傳遞一個ID號baidu.com?userId=123,這樣
就需要一個動態的路由來解決。
cost ruter = {
{ path: ‘/user:12‘, component: user }
}
當一個路由使用是後面有動態的參數,會映射到this.$router.param 中,這是函數體內調用路由的方法
響應路由參數的變化
因為沒有仔細看官網的實例,這點沒有看待,我遇到一次坑。這次教訓並不是粗心,是因為沒有仔細看文檔的好習慣,這個不好的習慣必須的改。就像數學老師說的回歸到基本理論
這也是一個常見的問題,我問需要監聽hash值的改變,來查詢參數如:
- book/search?cat=1
- book/search?cat=2
可是只有參數發生了改變,vue-router 認為組件式可以重用的,參數變化是不能引起從新向服務器獲取數據
const user = {
wacth: {
‘$route‘ (to, from) {
// 對路由變化作出響應...
}
}
}
嵌套路由
像這樣的的嵌套 /user/foo/profile
<div id="root">
<router-view> </router-view>
</div>
<router-view>
是最頂層的出口,渲染最高級路由匹配到的組件。同樣地,一個被渲染
組件同樣可以包含自己的嵌套
const router = new VueRouter({
routes: [
{ path: ‘/user/:id‘, component: User,
children: [
// UserHome will be rendered inside User‘s <router-view>
// when /user/:id is matched
{ path: ‘‘, component: UserHome },
// UserProfile will be rendered inside User‘s <router-view>
// when /user/:id/profile is matched
{ path: ‘profile‘, component: UserProfile },
// UserPosts will be rendered inside User‘s <router-view>
// when /user/:id/posts is matched
{ path: ‘posts‘, component: UserPosts }
]
}
]
})
函數式導航
註意 this.$route 和 this.router在使用上是有區別的
this.$router.push()
調用的方法
// 字符串
this.$router.push(‘home‘)
// 對象
this.$router.push({ path: ‘home‘ })
// 命名的路由
this.$router.push({ name: ‘user‘, params: { userId: 123 }})
// 帶查詢參數,變成 /register?plan=private
this.$router.push({ path: ‘register‘, query: { plan: ‘private‘ }})
this.$router.go(n)
意思是在 history 記錄中向前或者後退多少步
路由的命名
可以為路由設置,別名方便使用。如設置name, isshow
const router = new VueRouter({
routes: [
{
path: ‘/user/:userId‘,
name: ‘user‘,
isShow: false
component: User
}
]
})
路由的命名:示例
切換路由的時候可以修改頁面的標題
router.afterEach(transition => {
document.title = transition.name
})
導航鉤子
導航鉤子
全局鉤子
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
主要用來攔截導航,讓他完成跳轉或取消。
參數:
to :Route: 標識即將進入的目標路由對象
from: Route 當前導航正要離開的路由
next: function 調用該方法來resolve 鉤子,它的參數:
- next(): 進行管道中的下一個鉤子
- next(false): 中斷當前的導航
- next(‘/‘) 或者 next({ path: ‘/‘ }): 跳轉到一個不同的地址。當前的導航被中斷,然後進行一個新的導航。
實例:檢測用戶登錄
全局的鉤子主要用來是,判斷用戶是否登錄
router.beforeEach((to, from, next) => {
//頁面滾動到頂部
window.scroll(0, 0);
//用戶沒有登錄了,並且還想訪問別的頁面,強制跳轉login頁
if (!auth.login() && to.path !== ‘/login‘) {
next(‘login‘);
} else {
//用戶已經登錄了,不在讓用戶訪問login頁
if (auth.login() && to.path === ‘/login‘) {
next({
path: ‘/demo/user/list‘
});
} else {
next();
}
}
})
某個路由獨享的鉤子(VIP組件)
const router = new VueRouter({
routes: [
path: ‘/foo‘,
component: Foo,
beforeEach: (to, from, next) => {
}
]
})
路由元信息
較難理解
我們稱呼routers 配置中的每個路由對象為路由記錄。路由記錄可以是嵌套的。比如http://localhost:3000/#/demo/user/list
這個地址中可以說明路由記錄有三個,分別是:
- /demo
- /demo/use
- /demo/use/list
一個路由匹配到的多有路由記錄暴露在$route對象當中的$route.matched 數組當中,我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。
示例
路由對象信息
對象出現的地方,註意是route 沒有r結尾
route Object出現的地方 |
---|
router.match(location) |
this.$route |
全局鉤子 |
對象的屬性就不書寫了見路由信息對象的屬性
Router 實例
Router註意是 有r結尾
Router 實例屬性
$router.options
在$router 中有個鬼是$router.options 官網沒有找到,說明。
這個屬性包含了路由的樹形結構,可以借助這個來實現menu層級的劃分
轉載
vue路由復習(轉載)