一個vue的生命周期執行順序，邏輯，執行次數
vue每個組件都是獨立的，每個組件都有一個屬於它的生命周期。從一個組件的創建、掛載、更新、銷毀，這就是一個組件的生命周期。
（1）單組件執行順序
進入頁面默認會自動執行beforeCreate -> created -> beforeMount -> mounted
beforeCreate：在執行該函數時，$el、$data、methods、computed在this中【無法獲取】
created：在執行該函數時，$data、methods、computed在this中【可以】獲取（Tip：如果我們不用操作DOM可以發起網絡請求）
beforeMount：template準備掛載
mounted：在執行該函數時，$el可以在this中訪問（Tip：可以發起網絡請求）
（3）父子組件執行順序
首先會自動執行【父組件】的生命周期鉤子beforeCreate -> created -> beforeMount
然後會自動執行【子組件】的生命周期鉤子 beforeCreate -> created -> beforeMount-> mounted
最後在自動執行【父組件】的生命周期鉤子mounted
父組件自己的數據發生改變執行自己的生命周期鉤子beforeUpdate、updated
子組件自己的數據發生改變執行自己的生命周期鉤子beforeUpdate、updated
父組件會先執行beforeDestroy
子組件在執行beforeDestroy、destroyed
最後父組件執行destroyed
2.如果父子組件這種模式，那這個page的執行順序是什麼？
父組件created -> 子組件created -> 子組件mounted -> 父組件mounted
個人理解:這也說明了為什麼父組件得到的異步數據(一般後端接口返回)通過props傳遞在子組件的created中得不到,而是通過watch監聽後再進行處理
3.watch 監聽路由
watch除了可以監聽data中數據的變化，還可以監聽路由的變化。監聽 $route.path屬性
二話不說先上代碼：
watch:{ '$route.path':function(newVal,oldVal){ //console.log(newVal+"---"+oldVal); if(newVal === '/login'){ console.log('歡迎進入登錄頁面'); } else if(newVal === '/register'){ console.log('歡迎進入註冊頁面'); } } }以下是完整代碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head><body> <div id='app'> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link> <router-view></router-view> </div></body><script src="../lib/vue.js"></script><script src="../lib/vue-router-3.0.1.js"></script><script> var login = { template:'<h3>這是登錄子組件，這個組件是奔波開發的</h3>' } var register = { template:'<h3>這是註冊子組件，這個組件是霸波奔開發的</h3>' } var router = new VueRouter({ routes:[ {path:"/",redirect:'/login'}, {path:'/login',component:login}, {path:'/register',component:register} ] }) var vm = new Vue({ el:'#app', data:{ }, methods:{ }, router, watch:{ // this.$route.path '$route.path':function(newVal,oldVal){ //console.log(newVal+"---"+oldVal); if(newVal === '/login'){ console.log('歡迎進入登錄頁面'); } else if(newVal === '/register'){ console.log('歡迎進入註冊頁面'); } } } })</script></html>
3.路由傳參
（1）路由傳值
通過路由的路徑帶參數（url中顯示參數），同時配置路由的時候也要帶上參數，獲取參數使用this.$route.params.id，直接拿路由裡面的參數。
toRouter（）{ var id = 1; this.$router.push({ path:'/content/${id}', });}
router.js需配置
{ path:"index/:id", name:"index", component: Index}
//傳多個參數{ path:"index/:id1/:id2", name:"index", component: Index}
//相同路由有參數和無參數(需把有參數的放在無參數的前面){ path:"index/:id", name:"index", component: Index},{ path:"index", name:"index", component: Index}
（2）不用在router.js路由頁配置參數來接收（url中不顯示參數，刷新頁面會丟失傳遞過來的參數），而是通過name或者path去跳轉（name和path寫法一樣，區分name和path）。
//通過name跳轉toRouter(){ this.$router.push({ name:"content", params:{ content:this.content,//指定值或者獲取的值 page:"1", //其他需要傳遞的參數 } })}
//通過path跳轉toRouter(){ this.$router.push({ path:"/content", params:{ content:this.content,//指定值或者獲取的值 page:"1", //其他需要傳遞的參數 } })}
目標接收組件，例如：content.vue
created(){ this.getRouter();}methods:{ getRouter(){ this.content = this.$route.params.content; this.page = this.$route.params.page; }}
擴展：$router和$route的區別
Vue Router對$router和$route的解釋：
$router是router構造方法全局路由的實例。當導航到不同url，可以使用this.$router.push方法，這個方法則會向history裡面添加一條記錄，當點擊瀏覽器回退按鈕或者this.$router.back()就會回退之前的url。
$route對象表示當前的路由信息，包含了當前 URL 解析得到的信息。如path，name等。
路由跳轉分為編程式和聲明式
聲明式：
//路由入口<router-link :to="路由地址">//視圖出口 在一個頁面嵌套子路由，並且不跳轉頁面，子頁面就會渲染在router-view的地方<router-view></router-view>
<router-link to="/index">首頁</router-link>
編程式：（如提供了path，那麼params和query的配置就會被忽略）
router.push('millia')router.push({ path: 'millia' })router.push({ name: 'user', params: { userId: 'millia' }})router.push({ path: 'register', query: { plan: 'private' }})
path:'name'和path:'/name'的區別
this.$router.push({path:'name'})this.$router.push({path:'/name'})