练习

src/components/luyou.vue

@@ -1,13 +1,11 @@
 <template>
   <div style="display: flex;">
-<el-row class="tac" style="width:30%">
-  <el-col :span="12">
+<el-row class="tac">
+  <el-col :span="12" style="width:100%">
     <h5>自定义颜色</h5>
     <el-menu
       default-active="2"
       class="el-menu-vertical-demo"
-      @open="handleOpen"
-      @close="handleClose"
       background-color="#545c64"
       text-color="#fff"
       active-text-color="#ffd04b">
@@ -18,8 +16,10 @@
         </template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
-          <el-menu-item index="1-1" @click="$router.push('/login/abc')">选项1</el-menu-item>
-          <el-menu-item index="1-2" @click="$router.push('/login/user')">选项2</el-menu-item>
+          <el-menu-item index="1-1" @click="$router.push('/login/abc'),onComplete => {},
+onAbort => {}">helloword</el-menu-item>
+          <el-menu-item index="1-2" @click="$router.push('/login/user'),onComplete => {},
+onAbort => {}">user</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="分组2">
           <el-menu-item index="1-3">选项3</el-menu-item>

src/main.js

@@ -1,49 +1,88 @@
 // js 导入 模块式开发
 
-import Vue from 'vue'
+import Vue from "vue";
 // 导入 App.vue
-import App from './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 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";
 import "element-ui/lib/theme-chalk/index.css";
 
-
 // vuerouter 插件
 Vue.use(ElementUI);
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 // 路径 => 页面(组件)
-const routes = [{
+const routes = [
+  {
     path: "/abc",
-  component:HelloWorld
-},{
+    component: HelloWorld,
+    meta: "u",
+  },
+  {
     path: "/agfahg",
-  component:aaa
-}, {
+    component: aaa,
+    meta: "u",
+  },
+  {
     path: "/",
-  component: index
-}, {
+    component: index,
+    meta: "m",
+  },
+  {
     path: "/login",
     component: () => import("./components/luyou.vue"),
-  children:[{
+    children: [
+      {
         path: "user",
-    component: () => import("./pages/user.vue")
-  },{
+        component: () => import("./pages/user.vue"),
+        beforeEnter: (to, from, next) => {
+          // ...
+          next();
+          console.log("路由独享守卫");
+        },
+      },
+      {
         path: "abc",
-    component:HelloWorld
-  }]
-}]
+        component: HelloWorld,
+      },
+    ],
+  },
+];
 
 const router = new VueRouter({
-  routes // (缩写) 相当于 routes: routes
-})
+  mode: "history",
+  routes, // (缩写) 相当于 routes: routes
+});
 
-Vue.config.productionTip = false
+router.beforeEach((to, from, next) => {
+  //全局前置守卫
+  /*   console.log(to); //到哪里去
+  console.log(from); //上个页面  从哪里来的 */
+
+  console.log("这是导航守卫");
+  if (to.path != "/login/user") {
+    console.log("执行next");
+    next(); //控制页面跳转
+  } else {
+    alert("不能打开");
+  }
+});
+router.beforeResolve((to, from, next) => {
+  // ...全局解析守卫
+  next();
+});
+
+router.afterEach(() => {
+  console.log("跳转完成");
+  // ...全局后置钩子
+});
+
+Vue.config.productionTip = true;
 
 new Vue({
-  render: h => h(App),
-  router
-}).$mount('#aaa')
+  render: (h) => h(App),
+  router,
+}).$mount("#aaa");