增加组件内路由守卫

42_src_组件内路由守卫/App.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+      <div class="row">
+        <Banner />
+      </div>
+      <div class="row">
+        <div class="col-xs-2 col-xs-offset-2">
+          <div class="list-group">
+            <!-- 原始html中使用a标签实现页面的跳转 -->
+            <!-- <a href="./about.html" class="list-group-item active">About</a> -->
+            <!-- <a href="./home.html" class="list-group-item">Home</a> -->
+
+            <!-- Vue中借助router-link标签实现路由的切换  -->
+            <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
+            <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
+          </div>
+        </div>
+        <div class="col-xs-6">
+          <div class="panel">
+            <div class="panel-body">
+              <!-- 指定组件的呈现位置 -->
+              <router-view></router-view>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  import Banner from './components/Banner'
+  export default {
+    name:'App',
+    components:{
+      Banner
+    }
+  } 
+</script>

42_src_组件内路由守卫/components/Banner.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="col-xs-offset-2 col-xs-8">
+      <div class="page-header">
+        <h2>Vue Router Demo</h2>
+        <button @click="back">后退</button>
+        <button @click="forward">前进</button>
+        <button @click="test">测试一下to</button>
+      </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'Banner',
+    methods:{
+      back(){
+        this.$router.back()
+      },
+      forward(){
+        this.$router.forward()
+      },
+      test(){
+        // this.$router.go(2) //前进两步
+        this.$router.go(-2) //后退两步
+      }
+    },
+  }
+</script>

42_src_组件内路由守卫/main.js

@@ -0,0 +1,26 @@
+//引入Vue
+import Vue from 'vue'
+//引入app
+import App from './App'
+//引入vue-router
+import VueRouter from 'vue-router'
+//引入路由器
+import router from './router'
+
+//关闭vue的生产提示
+Vue.config.productionTip = false
+
+//使用路由器
+Vue.use(VueRouter)
+
+//创建vm
+new Vue({
+    el:'#app',
+    render: h => h(App),
+    router
+    // mounted(){
+    //     setTimeout(()=>{
+    //         this.$destroy()
+    //     },3000)
+    // }
+})

42_src_组件内路由守卫/pages/About.vue

@@ -0,0 +1,31 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+  export default {
+    name: 'About',
+    mounted(){
+      // console.log('About被挂载了')
+      window.aboutRoute = this.$route
+      window.aboutRouter = this.$router
+    },
+    // beforeDestroy(){
+    //   console.log('About被销毁了')
+    // },
+    beforeRouteEnter (to, from, next) {
+      console.log('about——beforeRouteEnter',to,from)
+      if(to.meta.isAuth){
+        if(localStorage.getItem('school') == 'atguigu') {
+          next()
+        } else {
+          alert('无权限！')
+        }
+      }
+    },
+    beforeRouteLeave (to, from, next) {
+      console.log('About——beofreRouteLeave',to,from)
+      next()
+    }
+  }
+</script>

42_src_组件内路由守卫/pages/Detail.vue

@@ -0,0 +1,24 @@
+<template>
+  <ul>
+    <li>消息编号：{{id}}</li>
+    <li>消息标题：{{title}}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    name:'Detail',
+    props:['id','title'],
+    computed:{
+      // id(){
+      //   return this.$route.params.id
+      // },
+      // title(){
+      //   return this.$route.params.title
+      // }
+    },
+    mounted(){
+      console.log(this)
+    }
+  }
+</script>

42_src_组件内路由守卫/pages/Home.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h2>Home组件内容</h2>
+    <div>
+      <ul class="nav nav-tabs">
+        <li>
+          <router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
+        </li>
+        <li>
+          <router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
+        </li>
+      </ul>
+      <!-- 缓存一个路由组件 -->
+      <!-- <keep-alive include="News">
+        <router-view></router-view>
+      </keep-alive> -->
+
+      <!-- 缓存多个路由组件 -->
+      <keep-alive :include="['News','Message']">
+        <router-view></router-view>
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Home',
+    mounted(){
+      // console.log('Home被挂载了')
+      window.homeRoute = this.$route
+      window.homeRouter = this.$router
+    },
+    // beforeDestroy(){
+    //   console.log('Home被销毁了')
+    // }
+  }
+</script>

42_src_组件内路由守卫/pages/Message.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="m in messageList" :key="m.id">
+        <!-- 跳转路由并携带参数，to的字符串写法 -->
+        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
+
+        <!-- 跳转路由并携带参数，to的对象写法 -->
+        <!-- <router-link :to="{
+          path:'/home/message/detail',
+          query:{
+            id:m.id,
+            title:m.title
+          }
+        }"> -->
+        <router-link :to="{
+          name: 'detailName',
+          query:{
+            id:m.id,
+            title:m.title
+          }
+        }">
+          {{m.title}}
+        </router-link>&nbsp;&nbsp;
+        <button @click="push(m)">push查看</button>
+        <button @click="replace(m)">replace查看</button>
+      </li>
+    </ul>
+    <hr>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Message',
+    beforeDestroy(){
+      console.log('Message组件即将被销毁了')
+    },
+    data(){
+      return {
+        messageList:[
+          {id:'001', title:'消息001'},
+          {id:'002', title:'消息002'},
+          {id:'003', title:'消息003'}
+        ]
+      }
+    },
+    methods:{
+      push(m){
+        this.$router.push({
+          name: 'detailName',
+          query:{
+            id:m.id,
+            title:m.title
+          }
+        })
+      },
+      replace(m){
+        this.$router.replace({
+          name: 'detailName',
+          query:{
+            id:m.id,
+            title:m.title
+          }
+        })
+      }
+    },
+    activated(){
+      console.log('Message组件被激活了')
+    },
+    deactivated(){
+      console.log('Message组件失活了')
+    }
+  }
+</script>

42_src_组件内路由守卫/pages/News.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <ul>
+      <li :style="{opacity}">欢迎学习vue</li>
+      <li>news001 <input type="text"></li>
+      <li>news002 <input type="text"></li>
+      <li>news003 <input type="text"></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'News',
+    data() {
+      return {
+        opacity: 1
+      }
+    },
+    beforeDestroy(){
+      console.log('News组件即将被销毁了')
+    },
+    activated(){
+      this.timer = setInterval(()=>{
+        console.log('@')
+        this.opacity -= 0.01
+        if(this.opacity < 0) this.opacity = 1 
+      },16)
+      console.log('News组件被激活了')
+    },
+    deactivated(){
+      clearInterval(this.timer)
+      console.log('News组件失活了')
+    }
+  }
+</script>