vue中组件内部路由守卫

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

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="row">
+      <Banner/>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <!--原始使用a标签跳转多个页面,多页面应用-->
+<!--          <a class="list-group-item active" href="./about.html">About</a>-->
+<!--          <a class="list-group-item" href="./home.html">Home</a>-->
+          <!--vue中借助router=link标签实现路由的切换-->
+<!--          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>-->
+          <router-link class="list-group-item" active-class="active" :to="{name: 'regard'}">About</router-link>
+          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <div class="panel">
+          <div class="panel-body">
+            <!--router-view确定视图的位置-->
+            <router-view>
+            </router-view>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Banner from "@/components/Banner";
+export default {
+  name: "App",
+  components: {Banner},
+}
+</script>
+<style lang="css" scoped>
+
+</style>
+
+
+

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

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

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

@@ -0,0 +1,22 @@
+//引入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-router插件
+Vue.use(VueRouter);
+
+new Vue({
+    el: '#app',
+    render: h => h(App),
+    router
+});
+
+
+

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

@@ -0,0 +1,39 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About",
+  mounted() {
+    //输出它身上的路由
+    console.log('The route of About', this.$route);
+  },
+  //组件内路由守卫
+
+  //与前置和后置是两码事
+  //通过路由规则进入该组件时被调用,注意一定是通过路由规则进入组件，普通的组件装载是不会调用的
+  beforeRouteEnter(to, from, next){
+    console.log('App---beforeRouteEnter');
+    console.log(from, to);
+    const { isAuth } = to.meta;
+    if(isAuth){
+             //代表需要鉴权
+      if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件
+      else alert('无权限');
+    }else{
+      next();
+    }
+  },
+  //通过路由规则离开该组件时被调用
+  beforeRouteLeave(to, from, next){
+    console.log('App---beforeRouteLeave');
+    console.log(from, to);
+    next();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+   <ul>
+     <li>消息编号:{{ id }}</li>
+     <li>消息标题:{{ title }}</li>
+   </ul>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ['id', 'title']
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h2>我是Home的内容</h2>
+    <div>
+      <ul class="nav nav-tabs">
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
+        </li>
+        <li>
+          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
+        </li>
+      </ul>
+      <!--include的值代表要缓存的组件，比如下面代表在Home组件中要缓存News组件(组件名)-->
+      <keep-alive include="News">
+        <router-view>
+        </router-view>
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home",
+  // mounted() {
+  //   console.log('Home组件挂载完毕', this);
+  //   window.homeRoute = this.$route;
+  //   window.homeRouter = this.$router;
+  // },
+  // // beforeDestroy() {
+  // //   console.log('Home组件将要被销毁');
+  // // }
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="m in messageList" :key="m.id">
+        <!---跳转路由并携带params参数，to的字符串写法-->
+<!--        <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>&nbsp;&nbsp;-->
+<!--        -跳转路由并携带params参数，to的对象写法-->
+        <router-link
+            :to="{
+              // path:'/home/message/detail',
+              name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
+              //注意如果你这里使用params传递参数,不能配置path，只能配置name,一定要注意
+              query: {
+                id: m.id,
+                title: m.title
+              }
+        }">
+          {{ m.title }}
+        </router-link>&nbsp;&nbsp;
+        <button @click="pushShow(m)">push查看</button>
+        <button @click="replaceShow(m)">replace查看</button>
+      </li>
+    </ul>
+    <hr/>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Message",
+  data(){
+    return {
+      messageList:[
+        {id: '001', title: '消息001'},
+        {id: '002', title: '消息002'},
+        {id: '003', title: '消息003'},
+      ]
+    }
+  },
+  methods:{
+    pushShow(m){
+      // console.log(this.$router); //router路由器 ==》管理 route路由(一系列key-value的规则)
+      this.$router.push({
+        //这里与router-link的to属性配置形式是一样的
+        name: 'particulars',
+        query:{
+          id: m.id,
+          title: m.title
+        }
+      })
+    },
+    replaceShow(m){
+       this.$router.replace({
+         //这里与router-link的to属性配置形式是一样的
+         name: 'particulars',
+         query:{
+           id: m.id,
+           title: m.title
+         }
+       })
+    }
+  },
+  beforeDestroy() {
+    console.log('Message组件将要被销毁');
+  }
+}
+</script>
+
+<style scoped>
+    button{
+      margin-right: 5px;
+    }
+</style>

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

@@ -0,0 +1,50 @@
+<template>
+  <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>
+</template>
+
+<script>
+export default {
+  name: "News",
+  data(){
+    return {
+      opacity: 1
+    }
+  },
+  // mounted() {
+  //   this.timer = setInterval(() => {
+  //     console.log('@')
+  //     this.opacity -= 0.01;
+  //     if(this.opacity <= 0) this.opacity = 1;
+  //   },16);
+  // },
+  //
+  // beforeDestroy() {
+  //   console.log('News组件将要被销毁');
+  //   clearInterval(this.timer);
+  // },
+
+  //激活(路由组件独有的两个钩子)
+  activated() {
+    console.log('News组件被激活');
+      this.timer = setInterval(() => {
+        console.log('@')
+        this.opacity -= 0.01;
+        if(this.opacity <= 0) this.opacity = 1;
+      },16);
+  },
+  //失活
+  deactivated() {
+    console.log('News组件失活了');
+    clearInterval(this.timer);
+  }
+}
+</script>
+
+<style scoped>
+
+</style>