init

src/pages/admin.vue

@@ -26,6 +26,7 @@
 export default {
     // 组件前置守卫不能用this
     beforeRouteEnter(to, from, next){
+        console.log(from.meta,"这是在组件内的导航收尾取到的")
         console.log("组件")  
         next()
     },
@@ -45,6 +46,7 @@ export default {
     },
     mounted(){
         console.log("生命周期")
+        console.log(this.$route.meta,"这是在组建内")
     },
     methods:{
         xiugai(){

src/router/index.js

@@ -5,16 +5,16 @@ 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: '/', component: index,meta:[{a:1},2,3] },
+    { path: '/a/b/c/d', name: "user", component: user,meta:"user" },
     {
-        path: "/admin", beforeEnter: (to, from, next) => {
+        path: "/admin",meta:"admin", beforeEnter: (to, from, next) => {
             // ...
             console.log("路由独享")
             next()
         }, component: admin
     },
-    { path: "/params", name: "params", component: () => import("../pages/params.vue") }
+    { path: "/params",meta:"admin", name: "params", component: () => import("../pages/params.vue") } // ()=>import('') 按需加载 路由异步加载
 ]
 // path
 // name 名字
@@ -33,16 +33,25 @@ const router = new VueRouter({
 // 前置守卫
 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 {
+    // this.$route.meta
+    console.log(to.meta,"路由元信息")
+    if(to.meta == "admin"){
+        console.log("权限验证")
+        // 权限验证
+        next()
+    }else{
         next()
     }
+    // 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) 停止跳转 这次跳转不生效