// 方式1、監(jiān)聽(tīng)路由 $route 變化  一般監(jiān)聽(tīng)
export default{
watch: {
$route(to, from){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由：' + to.path);
console.log('上一個(gè)路由：' + from);
},
}
}
// 方式2、監(jiān)聽(tīng)路由 $route 變化, 使用handler函數(shù) 深度監(jiān)聽(tīng)路由
export default{
watch: {
'$route': { // $route可以用引號(hào)，也可以不用引號(hào)  監(jiān)聽(tīng)的對(duì)象
handler(to, from){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由：' + to);
console.log('上一個(gè)路由：' + from);
},
deep: true, // 深度觀察監(jiān)聽(tīng) 設(shè)置為 true
immediate: true, // 第一次初始化渲染就可以監(jiān)聽(tīng)到
}
}
}
// 方式3、監(jiān)聽(tīng)路由 $route 變化,觸發(fā)methods里的方法
export default{
watch: {
'$route': 'initData'
},
methods: {
initData(){
console.log('路由變化了')
}
}
}
// 方式4、監(jiān)聽(tīng)路由的 path 變化
export default{
watch: {
'$route.path'(toPath, fromPath){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由地址：' + toPath)
console.log('上一個(gè)路由地址：' + fromPath)
},
}
}
// 方式5、監(jiān)聽(tīng)路由的 path 變化, 使用handler函數(shù)
export default{
watch: {
'$route.path': {
handler(toPath, fromPath){
console.log('路由變化了')
console.log('當(dāng)前頁(yè)面路由地址：' + toPath)
console.log('上一個(gè)路由地址：' + fromPath)
},
deep: true, // 深度監(jiān)聽(tīng)
immediate: true, // 第一次初始化渲染就可以監(jiān)聽(tīng)到
}
}
}
// 方式6、監(jiān)聽(tīng)路由的 path 變化,觸發(fā)methods里的方法
export default{
watch: {
'$route.path': 'initData'
},
methods: {
initData(){
console.log('路由變化了')
}
}
}

export default{
beforeRouteEnter(to, from, next){
// 渲染該組件前調(diào)用這個(gè)鉤子，因此組件還未被創(chuàng)建，不能獲取this
console.log(this) // 結(jié)果為：undefined
console.log('beforeRouteEnter')
next()
},
beforeRouteUpdate(to, from, next){
//這個(gè)組件是被復(fù)用的時(shí)候調(diào)用，比如帶有動(dòng)態(tài)參數(shù)的路由跳轉(zhuǎn)：/add/11 跳轉(zhuǎn)到 /detail/12
console.log(this) // 可以訪問(wèn)this
console.log('beforeRouteUpdate')
next()
},
beforeRouteLeave(to, from, next){
// 導(dǎo)航離開(kāi)當(dāng)前路由的時(shí)候被調(diào)用，this可以被訪問(wèn)到
console.log(this) // 可以訪問(wèn)this
console.log('beforeRouteLeave')
next()
},
}

// 方式1、在App.vue的create中進(jìn)行全局路由監(jiān)聽(tīng)
export default  {
name:  'App',
created() {
this.$router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
next()
})
}
}
// 方式2、在路由文件（/router/index.js）中進(jìn)行全局路由監(jiān)聽(tīng)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let routes = [
{
path: '/login',
component: resolve => require(['@/views/login'], resolve),
},
]
let router = new Router({
mode: 'history', // 去掉 url 中的 #
scrollBehavior: () => ({ y: 0 }),
base: process.env.VUE_APP_BASE_DOMAIN,
routes,
})
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
next()
})
export {
routes
router
}