meta

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

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: '/foo', meta:{qx:'user'},  component: foo },
-  { path: '/', component: index }
+  { 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,11 +1,31 @@
 <template>
-    <div>这是bar</div>
+    <div>这是bar
+        <router-link to="/">到首页</router-link>
+        <button @click="chuancan">传参</button>
+    </div>
 </template>
 <style scoped>
 
 </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

@@ -1,11 +1,47 @@
 <template>
-    <div>这是foo</div>
+    <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>
 
 </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传值
+            // params 传参的时候 不在url显示 刷新之后丢失了
+            let zhi = this.$route.meta
+            console.log(zhi)
+        },
+        tiaozhuan(){
+            this.$router.push({name:"foo",params:{name:new Date().getTime(),age:10}})
+        }
+    }
 }
 </script>

src/pages/index.vue

@@ -1,3 +1,51 @@
 <template>
-    <div>这是首页</div>
+  <div style="display:flex">
-</template>
+    <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: {
+    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>