meta

src/main.js

@@ -20,17 +20,81 @@ 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 协议
+// 127.0.0.1 ip  or 域名
+// www.baidu.com 域名 服务器
+// /adsaw/asdxc url 网址路径
 const routes = [
-  { path: '/foo', component: foo },
-  { path: '/bar', component: bar },
-  { path: '/', component: index }
+  
+  { path: '/foo', meta:{qx:'user'},  component: foo },
+  { path: '/bar', meta:{qx:'user'}, component: bar },
+  {
+    path: '/index', meta:{qx:'user'}, component: index, children: [
+      {path:"myqx", meta:{qx:'user'}, component: myqx},
+      {
+        path: 'foo/:name/:age', meta:{qx:'user'} , name:"foo", component: foo
+      },
+      { path: 'bar',meta:{qx:"admin"},beforeEnter(to, from, next){
+          console.log("这是独享")
+          next()
+      }, component: bar },
+    ]
+  },
+
+
 ]
 
 // router 路由对象
+// history model js
 const router = new VueRouter({
+  mode: 'history',
   routes: routes // (缩写) 相当于 routes: routes
 })
+
+// 导航守卫
+// beforeEach 导航前置守卫
+router.beforeEach((to, from, next) => {
+  // ...
+  // to 到哪个 路由对象
+  // from 从哪来 路由对象
+  // console.log(to,"to")
+  // console.log(from,"from")
+  console.log(to.path)
+  console.log("前置")
+  if(to.meta.qx == "admin" || to.path == "/index/myqx"){
+    next()
+  }else{
+    next("/index/myqx")
+  }
+ // 为什么要执行
+  // next 如果不执行 就不会进行路由跳转 首次进来 白屏
+})
+ 
+// beforeResolve 导航解析守卫
+router.beforeResolve((to, from, next) => {
+  // ...
+  // to 到哪个 路由对象
+  // from 从哪来 路由对象
+  // console.log(to,"to")
+  // console.log(from,"from")
+  console.log("解析")
+  next() // 为什么要执行
+  // next 如果不执行 就不会进行路由跳转 首次进来 白屏
+})
+
+// afterEach 全局后置钩子 跳转页面完成了
+router.afterEach(() => {
+  // ...
+  // console.log(to,"到哪")
+  // console.log(from,"来自哪")
+  console.log("后置")
+  // alert("跳转完成了")
+})
+// http://localhost:8080/index/bar
+
 // router 挂载路由 给vue实例
 new Vue({
   //render 让vue 渲染 App

src/pages/bar.vue

@@ -1,6 +1,7 @@
 <template>
     <div>这是bar
         <router-link to="/">到首页</router-link>
+        <button @click="chuancan">传参</button>
     </div>
 </template>
 <style scoped>
@@ -8,6 +9,23 @@
 </style>
 <script>
 export default {
-    
+    beforeRouteEnter(to,from,next){
+        console.log("组件独享前置")
+        next()
+    },
+    beforeRouteLeave(to,from,next){
+        console.log("组件离开守卫")
+        next()
+    },
+    beforeRouteUpdate(to,from,next){
+        console.log("组件复用")
+        next()
+    },
+    methods:{
+        chuancan(){
+            console.log(this.$route.meta)
+            // this.$router.push({path: "/index/bar",query:{a: new Date().getTime()}})
+        }
+    }
 }
 </script>

src/pages/foo.vue

@@ -2,6 +2,9 @@
     <div>这是foo
         <router-link to="/bar">到bar</router-link>
         <button @click="getzhi">获取传值</button>
+        <button @click="tiaozhuan">跳转</button>
+        
+        <router-view></router-view>
     </div>
 </template>
 <style scoped>
@@ -9,11 +12,35 @@
 </style>
 <script>
 export default {
+     beforeRouteEnter(to, from, next) {
+        // 在渲染该组件的对应路由被 confirm 前调用
+        // 不！能！获取组件实例 `this`
+        // 因为当守卫执行前，组件实例还没被创建
+        console.log("组件进入")
+        next()
+    },
+    beforeRouteUpdate(to,from,next){
+        // 参数改变 路由没变 params query 页面跳转 
+        console.log("组件复用")
+        next()
+    },
     methods:{
         getzhi(){
+
+            // let a = "小梦"
+            // let b = 18;
+
+            // // let str = "名字是" + a + "年龄是" + b
+            // // 模板字符串
+            // let str = `名字是${a}年龄是${b}`
+            // console.log(str)
             // 如何获取url传值
-            let zhi = this.$route.query
+            // params 传参的时候 不在url显示 刷新之后丢失了
+            let zhi = this.$route.meta
             console.log(zhi)
+        },
+        tiaozhuan(){
+            this.$router.push({name:"foo",params:{name:new Date().getTime(),age:10}})
         }
     }
 }

src/pages/index.vue

@@ -1,31 +1,51 @@
 <template>
-  <div>
-    这是首页
-    <!-- 不能用a标签 -->
-    <!-- <a href="/foo">到foo</a> -->
-    <!-- <router-link to="/foo">到foo</router-link> -->
-    <button @click="tiaozhuan">用js replace 跳转</button>
-    <button @click="back">后退一步</button>
-    <router-link :to="{path:'/foo',query:{name:123,age:234,asda:1411}}">到foo</router-link>
+  <div style="display:flex">
+    <div class="menu">
+      <el-menu
+        default-active="2"
+        class="el-menu-vertical-demo menu"
+      >
+        <el-menu-item index="2" @click="toindex">
+          <i class="el-icon-menu"></i>
+          <span slot="title">首页</span>
+        </el-menu-item>
+        <el-menu-item index="3" @click="tobar">
+          <i class="el-icon-document"></i>
+          <span slot="title">bar</span>
+        </el-menu-item>
+        <el-menu-item index="4" @click="tofoo">
+          <i class="el-icon-setting"></i>
+          <span slot="title">foo</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <router-view></router-view>
   </div>
 </template>
 <script>
 export default {
-    methods:{
-        tiaozhuan(){
-            // js this.$router.push
-            // js跳转 (*)
-            // 编程式导航
-            this.$router.push({path:'/foo',query:{name:123,age:234,asda:1411}})
-            // 用这个跳转的时候 当前页面不能被回退 在历史记录中消失了
-            // 
-            // this.$router.replace({path:'/foo',query:{name:123,age:234,asda:1411}})
-        },
-        back(){
-            // 前进或后退多少步 正数是前进 负数是后退
-            // 如果后退 前进 数量不够 他就不会跳转
-            this.$router.go(99999);
-        }
-    }
-}
+  methods: {
+    toindex(){
+      this.$router.push("/index")
+    },
+    tobar(){
+      // "/index/bar" path
+      this.$router.push("/index/bar")
+    },
+    tofoo(){
+      //  { name  } 才是用name跳转
+      // params 使用这个方式传值 必须使用命名路由 用path跳转传不过去
+      // this.$router.push({ path:"/index/foo",params:{name:"111"} })
+      this.$router.push({ name:"foo",params:{name:"aaaa",age:18} })
+
+    },
+   
+  },
+};
 </script>
+<style scoped>
+.menu{
+  width:200px;
+  height: 100vh;
+}
+</style>

src/pages/myqx.vue

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