package.json

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

src/main.js

@@ -20,81 +20,17 @@ 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: '/foo', meta:{qx:'user'},  component: foo },
+  { path: '/bar', component: bar },
-  { path: '/bar', meta:{qx:'user'}, component: bar },
+  { path: '/', component: index }
-  {
-    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,31 +1,11 @@
 <template>
-    <div>这是bar
+    <div>这是bar</div>
-        <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,47 +1,11 @@
 <template>
-    <div>这是foo
+    <div>这是foo</div>
-        <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,51 +1,3 @@
 <template>
-  <div style="display:flex">
+    <div>这是首页</div>
-    <div class="menu">
+</template>
-      <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

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