<keep-alive></keep-alive>
- 使頁面保持狀態(tài)，在此標簽下的
<router-view>標簽會保持狀態(tài)搅方。 - :exclude="[]"，此屬性下的值為數(shù)組姨涡，可以把部分 不需要保持狀態(tài)的頁面name寫進去衩藤。
created()
- 生命周期鉤子：組件創(chuàng)建時
- 可以插入初始化數(shù)據(jù)請求，并可以調(diào)用data數(shù)據(jù)绣溜、router參數(shù)
computed:{}
- 計算屬性
- 可以獲取data數(shù)據(jù)，進行計算返回數(shù)據(jù)娄蔼，vue實例可以直接調(diào)用該對象下方法
methods:{}
- 事件處理器：用來存放組件中涉及到的各種事件
- 事件可以互相調(diào)用怖喻，可以調(diào)用data數(shù)據(jù)，可以獲取dom岁诉，可以獲取ref
watch:{}
- 監(jiān)視器：可以監(jiān)視數(shù)據(jù)變化锚沸，也可以監(jiān)視路由變化
- 參數(shù)：val,oldval
監(jiān)視路由變化例子
watch:{
$route(to,from){//當路由發(fā)生變化，觸發(fā)此函數(shù)
console.log(to.path)
}
}
mounted(){}
- 生命周期鉤子：當視圖渲染完畢時（不包括子組件）
- 可以處理當視圖渲染完后要進行的動作
this.$nextTick(callback)
- vue實例上一個方法
- 等待視圖完成更新涕癣，并執(zhí)行內(nèi)部回調(diào)函數(shù)
例子 - 不支持 不支持promise的瀏覽器（如IE）哗蜈，可以自行polyfill
methods：{
ex() {
this.message = '123'//此時視圖還沒渲染完畢
this.$nextTick(function () {
// DOM 現(xiàn)在更新了
})
}
}
ref this.$refs.string
-
ref被用來給元素或子組件注冊引用信息 -
this.$refs.string為vue實例上的一個對象 - 在渲染后被創(chuàng)建
- 功能 獲取dom
components: {}
- 包含 Vue 實例可用組件的哈希表。
router導(dǎo)航守衛(wèi)
vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機會植入路由導(dǎo)航過程中：全局的, 單個路由獨享的, 或者組件級的距潘。
參數(shù)或查詢的改變并不會觸發(fā)進入/離開的導(dǎo)航守衛(wèi)炼列。你可以通過觀察 $route 對象來應(yīng)對這些變化，或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)音比。
全局守衛(wèi)(router.beforeEach((to,from,next)=>{}))
每個守衛(wèi)方法接收三個參數(shù)：
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導(dǎo)航正要離開的路由
-
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子俭尖。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
next(): 進行管道中的下一個鉤子洞翩。如果全部鉤子執(zhí)行完了稽犁，則導(dǎo)航的狀態(tài)就是 confirmed （確認的）。
next(false): 中斷當前的導(dǎo)航骚亿。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕）已亥，那么 URL 地址會重置到 from 路由對應(yīng)的地址。
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址来屠。當前的導(dǎo)航被中斷虑椎，然后進行一個新的導(dǎo)航。你可以向 next 傳遞任意位置對象的妖，且允許設(shè)置諸如 replace: true绣檬、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例嫂粟，則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)娇未。
確保要調(diào)用 next 方法，否則鉤子就不會被 resolved星虹。
路由獨享的守衛(wèi)
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
組件內(nèi)的守衛(wèi)
最后零抬，你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)：
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
// 不！能宽涌！獲取組件實例 `this`
// 因為當守衛(wèi)執(zhí)行前平夜，組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當前路由改變，但是該組件被復(fù)用時調(diào)用
// 舉例來說卸亮，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id忽妒，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
// 由于會渲染同樣的 Foo 組件兼贸，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用溶诞。
// 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
// 可以訪問組件實例 `this`
}
}
可以通過傳一個回調(diào)給 next來訪問組件實例。在導(dǎo)航被確認的時候執(zhí)行回調(diào)喧务，并且把組件實例作為回調(diào)方法的參數(shù)。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實例
vm.type = vm.$route.query.type;
})
}
注意 beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)庐冯。對于 beforeRouteUpdate 和 beforeRouteLeave 來說痊土，this 已經(jīng)可用了，所以不支持傳遞回調(diào)犯祠，因為沒有必要了
這個離開守衛(wèi)通常用來禁止用戶在還未保存修改前突然離開衡载。該導(dǎo)航可以通過 next(false) 來取消隙袁。
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
路由跳轉(zhuǎn)帶參
this.$router.push({path: '路由地址', query:{id: this.plan.id,no:this.plan.no,type:this.obType}})
