ADD:路由卫士

Author: leeycode

src/main.ts

@@ -4,6 +4,7 @@ import router from './router';
 import store from './store';
 
 import { Component } from 'vue-property-decorator';
+import { Route } from 'vue-router';
 
 Component.registerHooks([
   'beforeRouteEnter',
@@ -13,6 +14,10 @@ Component.registerHooks([
 
 Vue.config.productionTip = false;
 
+router.beforeEach((to: Route, from: Route, next: () => void) => {
+  console.log(to, from);
+  next();
+});
 new Vue({
   router,
   store,

src/pages/about/About.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <button @click="goBack">go back</button>
   </div>
 </template>
 
@@ -17,7 +18,7 @@ export default class About extends Vue {
 
   private beforeRouteEnter(to: Route, from: Route, next: () => void): void {
     console.log('beforeRouteEnter', to, from, next);
-    next(); // 没有next将不会进入路由内部，跟vue文档用法一致
+    next();
   }
 
   private beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
@@ -29,6 +30,10 @@ export default class About extends Vue {
     console.log('beforeRouteLeave');
     next();
   }
+
+  private goBack() {
+    this.$router.back();
+  }
 }
 
 </script>