ADD:路由监听和路由钩子函数

Author: leeycode

src/main.ts

@@ -3,6 +3,14 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
+import { Component } from 'vue-property-decorator';
+
+Component.registerHooks([
+  'beforeRouteEnter',
+  'beforeRouteLeave',
+  'beforeRouteUpdate'
+]);
+
 Vue.config.productionTip = false;
 
 new Vue({

src/pages/about/About.vue

@@ -5,9 +5,30 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Watch } from 'vue-property-decorator';
+import { Route } from 'vue-router';
 
 @Component
-export default class About extends Vue {}
+export default class About extends Vue {
+  @Watch('$route', { immediate: true })
+  private changeRouter(route: Route) {
+    console.log('route', route);
+  }
+
+  private beforeRouteEnter(to: Route, from: Route, next: () => void): void {
+    console.log('beforeRouteEnter', to, from, next);
+    next(); // 没有next将不会进入路由内部，跟vue文档用法一致
+  }
+
+  private beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
+    console.log('beforeRouteUpdate'); // 暂时不生效，版本问题
+    next();
+  }
+
+  private beforeRouteLeave(to: Route, from: Route, next: () => void): void {
+    console.log('beforeRouteLeave');
+    next();
+  }
+}
 
 </script>

src/router/index.ts

@@ -1,20 +1,24 @@
 import Vue from 'vue';
-import Router from 'vue-router';
+import VueRouter, { RouteConfig } from 'vue-router';
 import Home from '@/pages/home/Home.vue';
 
-Vue.use(Router);
+Vue.use(VueRouter);
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import(/* webpackChunkName: "about" */ '@/pages/about/About.vue')
-    }
-  ]
+const routes: Array<RouteConfig> = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import(/* webpackChunkName: "about" */ '@/pages/about/About.vue')
+  }
+];
+
+const router = new VueRouter({
+  routes
 });
+
+export default router;