meta

src/main.js

@@ -20,6 +20,7 @@ Vue.use(VueRouter) // vue 使用vuerouter
 import bar from './pages/bar.vue'
 import foo from './pages/foo.vue'
 import index from "./pages/index.vue"
+import myqx from "./pages/myqx.vue"
 // http://www.baidu.com/adsaw
 
 // http 协议
@@ -27,16 +28,16 @@ import index from "./pages/index.vue"
 // www.baidu.com 域名 服务器
 // /adsaw/asdxc url 网址路径
 const routes = [
-  { path: '/foo', redirect:{ name: 'bar',query:{name:111,age:111} } ,  component: foo },
+  
-  { path: '/bar', component: bar },
+  { path: '/foo', meta:{qx:'user'},  component: foo },
+  { path: '/bar', meta:{qx:'user'}, component: bar },
   {
-    path: '/index', component: index, children: [
+    path: '/index', meta:{qx:'user'}, component: index, children: [
+      {path:"myqx", meta:{qx:'user'}, component: myqx},
       {
-        path: 'foo/:name/:age', name:"foo", component: foo, children: [{
+        path: 'foo/:name/:age', meta:{qx:'user'} , name:"foo", component: foo
-          path: 'aaa', component: bar
-        }]
       },
-      { path: 'bar',beforeEnter(to, from, next){
+      { path: 'bar',meta:{qx:"admin"},beforeEnter(to, from, next){
           console.log("这是独享")
           next()
       }, component: bar },
@@ -53,7 +54,6 @@ const router = new VueRouter({
   routes: routes // (缩写) 相当于 routes: routes
 })
 
-
 // 导航守卫
 // beforeEach 导航前置守卫
 router.beforeEach((to, from, next) => {
@@ -62,11 +62,17 @@ router.beforeEach((to, from, next) => {
   // from 从哪来 路由对象
   // console.log(to,"to")
   // console.log(from,"from")
+  console.log(to.path)
   console.log("前置")
-  next() // 为什么要执行
+  if(to.meta.qx == "admin" || to.path == "/index/myqx"){
+    next()
+  }else{
+    next("/index/myqx")
+  }
+ // 为什么要执行
   // next 如果不执行 就不会进行路由跳转 首次进来 白屏
 })
-
+ 
 // beforeResolve 导航解析守卫
 router.beforeResolve((to, from, next) => {
   // ...

src/pages/bar.vue

@@ -23,7 +23,8 @@ export default {
     },
     methods:{
         chuancan(){
-            this.$router.push({path: "/index/bar",query:{a: new Date().getTime()}})
+            console.log(this.$route.meta)
+            // this.$router.push({path: "/index/bar",query:{a: new Date().getTime()}})
         }
     }
 }

src/pages/foo.vue

@@ -36,7 +36,7 @@ export default {
             // console.log(str)
             // 如何获取url传值
             // params 传参的时候 不在url显示 刷新之后丢失了
-            let zhi = this.$route.params
+            let zhi = this.$route.meta
             console.log(zhi)
         },
         tiaozhuan(){

src/pages/index.vue

@@ -38,7 +38,8 @@ export default {
       // this.$router.push({ path:"/index/foo",params:{name:"111"} })
       this.$router.push({ name:"foo",params:{name:"aaaa",age:18} })
 
-    }
+    },
+   
   },
 };
 </script>

src/pages/myqx.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>你没有权限访问</div>
+</template>