fi

src/router/index.js

@@ -0,0 +1,66 @@
+import Vue from 'vue' // 引入 vue  nodem_moudules 不需要写路径
+import VueRouter from 'vue-router' // 引入vuroute
+import index from "../views/index.vue"
+import user from "../views/user.vue"
+import admin from "../pages/admin.vue"
+Vue.use(VueRouter)
+const routes = [
+    { path: '/', component: index },
+    { path: '/a/b/c/d', name: "user", component: user },
+    {
+        path: "/admin", beforeEnter: (to, from, next) => {
+            // ...
+            console.log("路由独享")
+            next()
+        }, component: admin
+    },
+    { path: "/params", name: "params", component: () => import("../pages/params.vue") }
+]
+// path
+// name 名字
+const router = new VueRouter({
+    mode: "history",
+    routes // (缩写) 相当于 routes: routes
+})
+
+// 1.全局前置守卫
+// 2.路由独享守卫
+// 3.组件内解析守卫
+// 4. 解析守卫
+// 5. 全局后置守卫
+
+
+// 前置守卫
+router.beforeEach((to, from, next) => {
+    // console.log(to,from)
+    if (to.path == "/") {
+        // alert("你即将到首页")
+        console.log("你即将到首页")
+    }
+    if (to.path == "/a/b/c/d") {
+        console.log("到user")
+        next({ path: '/admin', query: { name: 123 } })
+    } else {
+        next()
+    }
+    // ...
+    // next() // 继续跳转
+    // next(false) 停止跳转 这次跳转不生效
+    // next('url') or next({path,query,params,name}) 重定向到其他也页面
+})
+router.beforeResolve((to, from, next) => {
+    console.log("解析收尾")
+        next()
+
+    // ...
+    // next() // 继续跳转
+    // next(false) 停止跳转 这次跳转不生效
+    // next('url') or next({path,query,params,name}) 重定向到其他也页面
+})
+//   后置 跳转完成之后
+router.afterEach((to, from) => {
+    console.log(to, from, "后置")
+
+    // ...
+})
+export default router