导航首位

src/main.js

@@ -27,7 +27,6 @@ import index from "./pages/index.vue"
 // www.baidu.com 域名 服务器
 // /adsaw/asdxc url 网址路径
 const routes = [
-  {path: "*",component: bar},
   { path: '/foo', redirect:{ name: 'bar',query:{name:111,age:111} } ,  component: foo },
   { path: '/bar', component: bar },
   {
@@ -37,7 +36,10 @@ const routes = [
           path: 'aaa', component: bar
         }]
       },
-      { path: 'bar',name:"bar", component: bar },
+      { path: 'bar',beforeEnter(to, from, next){
+          console.log("这是独享")
+          next()
+      }, component: bar },
     ]
   },
 
@@ -50,6 +52,43 @@ const router = new VueRouter({
   mode: 'history',
   routes: routes // (缩写) 相当于 routes: routes
 })
+
+
+// 导航守卫
+// beforeEach 导航前置守卫
+router.beforeEach((to, from, next) => {
+  // ...
+  // to 到哪个 路由对象
+  // from 从哪来 路由对象
+  // console.log(to,"to")
+  // console.log(from,"from")
+  console.log("前置")
+  next() // 为什么要执行
+  // next 如果不执行 就不会进行路由跳转 首次进来 白屏
+})
+
+// beforeResolve 导航解析守卫
+router.beforeResolve((to, from, next) => {
+  // ...
+  // to 到哪个 路由对象
+  // from 从哪来 路由对象
+  // console.log(to,"to")
+  // console.log(from,"from")
+  console.log("解析")
+  next() // 为什么要执行
+  // next 如果不执行 就不会进行路由跳转 首次进来 白屏
+})
+
+// afterEach 全局后置钩子 跳转页面完成了
+router.afterEach(() => {
+  // ...
+  // console.log(to,"到哪")
+  // console.log(from,"来自哪")
+  console.log("后置")
+  // alert("跳转完成了")
+})
+// http://localhost:8080/index/bar
+
 // router 挂载路由 给vue实例
 new Vue({
   //render 让vue 渲染 App

src/pages/bar.vue

@@ -1,6 +1,7 @@
 <template>
     <div>这是bar
         <router-link to="/">到首页</router-link>
+        <button @click="chuancan">传参</button>
     </div>
 </template>
 <style scoped>
@@ -8,6 +9,22 @@
 </style>
 <script>
 export default {
-    
+    beforeRouteEnter(to,from,next){
+        console.log("组件独享前置")
+        next()
+    },
+    beforeRouteLeave(to,from,next){
+        console.log("组件离开守卫")
+        next()
+    },
+    beforeRouteUpdate(to,from,next){
+        console.log("组件复用")
+        next()
+    },
+    methods:{
+        chuancan(){
+            this.$router.push({path: "/index/bar",query:{a: new Date().getTime()}})
+        }
+    }
 }
 </script>

src/pages/foo.vue

@@ -2,6 +2,8 @@
     <div>这是foo
         <router-link to="/bar">到bar</router-link>
         <button @click="getzhi">获取传值</button>
+        <button @click="tiaozhuan">跳转</button>
+        
         <router-view></router-view>
     </div>
 </template>
@@ -10,6 +12,18 @@
 </style>
 <script>
 export default {
+     beforeRouteEnter(to, from, next) {
+        // 在渲染该组件的对应路由被 confirm 前调用
+        // 不！能！获取组件实例 `this`
+        // 因为当守卫执行前，组件实例还没被创建
+        console.log("组件进入")
+        next()
+    },
+    beforeRouteUpdate(to,from,next){
+        // 参数改变 路由没变 params query 页面跳转 
+        console.log("组件复用")
+        next()
+    },
     methods:{
         getzhi(){
 
@@ -24,6 +38,9 @@ export default {
             // params 传参的时候 不在url显示 刷新之后丢失了
             let zhi = this.$route.params
             console.log(zhi)
+        },
+        tiaozhuan(){
+            this.$router.push({name:"foo",params:{name:new Date().getTime(),age:10}})
         }
     }
 }