daohang

src/components/zujian.vue

@@ -1,39 +1,10 @@
 <template>
     <div>
         商品
-        计数: {{count}}
-        <button @click="dianwo">点我</button>
-        <button @click="jian">减</button>
     </div>
 </template>
 
 <script>
-    export default {
-        name:"ZuJian",
-        data(){
-            return {
-                count:0
-            }
-        },
-        methods:{
-            dianwo(){
-                // console.log("事件触发")
-                this.count++
-                // vue 自带的
-                // 父传子 属性
-                // 子传父 事件
-                // 触发 父级的事件
-                this.$emit("abc",this.count,"第二个参数")
-                // 子传父
-                // this.$emit("aaa",2222,1111,6666)
-            },
-            jian(){
-                this.count--
-                // this.$emit("aaa",this.count)
-
-            }
-        }
-    }
 </script>
 
 <style>

src/main.js

@@ -4,8 +4,6 @@ import Vue from 'vue'
 // 导入 App.vue
 import App from './App.vue'
 // import zujian from "./components/zujian.vue"
-import HelloWorld from "./components/HelloWorld.vue"
-import aaa from "./components/aaa.vue"
 import VueRouter from "vue-router"
 import index from "./pages/index.vue"
 import ElementUI from 'element-ui';
@@ -18,13 +16,7 @@ Vue.use(ElementUI);
 
 Vue.use(VueRouter)
 // 路径 => 页面(组件)
-const routes = [{
-  path:"/abc",
-  component:HelloWorld
-},{
-  path:"/agfahg",
-  component:aaa
-},
+const routes = [
 {
   path:"/nav",
   component:() => import("./pages/nav.vue"),
@@ -40,6 +32,10 @@ const routes = [{
     path:"/",
     component: index
   },
+  {
+    path:"aaa",
+    component: () => import("./components/aaa.vue")
+  },
 ],
 }
 ]
@@ -48,7 +44,22 @@ const router = new VueRouter({
   routes // (缩写) 相当于 routes: routes
 })
 
-Vue.config.productionTip = false
+// 这个函数在页面跳转的时候，自动被执行，这就是导航守卫
+router.beforeEach((to,from,next) => {
+  // to中的path显示的是当前的路径
+  console.log(to)
+  // from中的path显示的是跳转到当前路径的之前的路径
+  console.log(from)
+  console.log("这是导航守卫")
+  // next控制页面的跳转
+  // next()
+  if(to.path != "/nav"){
+    console.log("执行next")
+    next()
+  }else{
+    alert("无法访问")
+  }
+})
 
 new Vue({
   render: h => h(App),

src/pages/nav.vue

@@ -4,8 +4,6 @@
             <el-menu
       default-active="2"
       class="el-menu-vertical-demo"
-      @open="handleOpen"
-      @close="handleClose"
       background-color="#545c64"
       text-color="#fff"
       active-text-color="#ffd04b"
@@ -32,7 +30,7 @@
         <i class="el-icon-menu"></i>
         <span slot="title">导航二</span>
       </el-menu-item>
-      <el-menu-item index="3" disabled>
+      <el-menu-item index="3" @click="$router.push('/nav/aaa')">
         <i class="el-icon-document"></i>
         <span slot="title">导航三</span>
       </el-menu-item>