Programmed route navigation

As we know, generally speaking, a router link label is used to realize route jump. If you don't use it now, you will use programmed routing navigation. Next, in the previous case, we need to click the message button, and then click the button to display the message details.
First, modify the code in message.vue and print out the contents of router router on the console.

<template>
  <div>
    <!-- v-for ergodic data Data in, and then display -->
    <ul v-for="m in messageList" :key="m.id">
      <li>
        <!-- What follows the question mark is the parameter to be passed params parameter -->
        <!-- to Add a colon in front, then to What follows js Expression processing,
        The small back quotation mark inside the double quotation mark, also known as the template string,Is to specify that the things in the back quotation marks are in string format
         there detail After that, the parameters are passed in the form of slash and parameter-->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{
          m.title
        }}</router-link>
        &nbsp;&nbsp; -->

        <!-- Transfer parameters, object-oriented writing -->
        <!-- Note: if used params Pass parameter, then to A named route must be used in the back, not like query It can also be used as a parameter path -->
        <router-link
          :to="{
            name: 'xiangqing',
            params: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >
        &nbsp;&nbsp;
        <button @click="pushShow">push see</button>
        <button>replace see</button>
      </li>
    </ul>
    <hr />
    <!-- Show routing management. routerview，Routing view -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "Message 001" },
        { id: "002", title: "Message 002" },
        { id: "003", title: "Message 003" },
      ],
    };
  },
  methods: {
    pushShow() {
      console.log(this.$router);
    },
  },
};
</script>

The output is as follows:

Use in prototype objects_ proto_ push and replace in realize our functional requirements.

Finally, modify the code in message.vue and use the API, push and replace in the router prototype to realize the page Jump.

<template>
  <div>
    <!-- v-for ergodic data Data in, and then display -->
    <ul v-for="m in messageList" :key="m.id">
      <li>
        <!-- What follows the question mark is the parameter to be passed params parameter -->
        <!-- to Add a colon in front, then to What follows js Expression processing,
        The small back quotation mark inside the double quotation mark, also known as the template string,Is to specify that the things in the back quotation marks are in string format
         there detail After that, the parameters are passed in the form of slash and parameter-->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{
          m.title
        }}</router-link>
        &nbsp;&nbsp; -->

        <!-- Transfer parameters, object-oriented writing -->
        <!-- Note: if used params Pass parameter, then to A named route must be used in the back, not like query It can also be used as a parameter path -->
        <router-link
          :to="{
            name: 'xiangqing',
            params: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >
        &nbsp;&nbsp;
        <!-- m It's all over li Inside, we're methods It's used in, so here it is pushShow(m)Pass it on. -->
        <button @click="pushShow(m)">push see</button>
        <button @click="replaceShow(m)">replace see</button>
      </li>
    </ul>
    <hr />
    <!-- Show routing management. routerview，Routing view -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "Message 001" },
        { id: "002", title: "Message 002" },
        { id: "003", title: "Message 003" },
      ],
    };
  },
  methods: {
    pushShow(m) {
      this.$router.push({
        name: "xiangqing",
        params: {
          id: m.id,
          title: m.title,
        },
      });
    },
    replaceShow(m) {
      this.$router.replace({
        name: "xiangqing",
        params: {
          id: m.id,
          title: m.title,
        },
      });
    },
  },
};
</script>

Modify the code in banner.vue, add buttons back and forward, and test an API called go.

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header">
      <h2>Vue Router Demo</h2>
      <button @click="back">back off</button>
      <button @click="forward">forward</button>
      <button @click="test">Test it go</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  methods: {
    back() {
      // Using the back and forward of the router prototype, the router is the highest command and has the highest decision-making power
      this.$router.back();
    },
    forward() {
      this.$router.forward();
    },
    test() {
      //Here, you need to pass numbers in go. Passing negative numbers means going back, and - 2 means going back two steps
      this.$router.go(-2);
    },
  },
};
</script>

The final output effect is as follows


We can jump the page by clicking the back and forward buttons in the page, and we can jump by clicking the back and forward symbols in the navigation bar.

Summary

Cache routing component

Continue to add new functions and input boxes. After switching the routing page, the contents of the input box will not disappear. The reason for the disappearance is that after we have switched pages, the components of the original routing page are destroyed. Now we let him keep the input without destroying it. Our News component is displayed through the router view written in the home component. So set a label in home called keep alive to stay active.
Home.vue code

<template>
  <div>
    <h2>Home Component content</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <!-- If we want to to，The address to is a sub route, so you have to to Write his parent path in the back -->
          <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>
      <!-- Keep active, cache only news assembly-->
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  /* beforeDestroy() {
			console.log('Home Component is about to be destroyed ')
		}, */
  /* mounted() {
			console.log('Home Component mount completed ', this)
			window.homeRoute = this.$route
			window.homeRouter = this.$router
		},  */
};
</script>

News.vue code

<template>
  <ul>
    Add input box
    <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",
  beforeDestroy() {
    //It is proved that after we switched the routing page, the component was destroyed
    console.log('news The component is about to be destroyed');
  },
};
</script>

Output effect

Summary

New lifecycle function (hook)

Add a welcome message to the news display, and the transparency will change over and over again.
The News.vue code is as follows

<template>
  <ul>
    <li :style="{ opacity }">Welcome to study vue</li>
    <!-- Add input box -->
    <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,
    };
  },
  beforeDestroy() {
    //It is proved that after we switched the routing page, the component was destroyed
    console.log("news The component is about to be destroyed");
    //The timer should be cleared when it runs out
    clearInterval(this.timer)
  },
  mounted() {
    this.timer = setInterval(() => {
      this.opacity -= 0.01;
      if (this.opacity <= 0) this.opacity = 1;
    }, 16);
  },
};
</script>

But if you write this way, the code that controls the new function will always be called. When you switch to another page, it will still run in the background. Use two new lifecycle functions, activated and deactivated

<template>
  <ul>
    <li :style="{ opacity }">Welcome to study vue</li>
    <!-- Add input box -->
    <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,
    };
  },
  // beforeDestroy() {
  //   //It is proved that after we switched the routing page, the component was destroyed
  //   console.log("news component will be destroyed soon");
  //   //The timer should be cleared when it runs out
  //   clearInterval(this.timer)
  // },
  // mounted() {
  //   this.timer = setInterval(() => {
  //     this.opacity -= 0.01;
  //     if (this.opacity <= 0) this.opacity = 1;
  //   }, 16);
  // },
  //activation
  activated() {
    console.log("news The component is activated");
    this.timer = setInterval(() => {
      this.opacity -= 0.01;
      if (this.opacity <= 0) this.opacity = 1;
    }, 16);
  },
  //Deactivation
  deactivated() {
    console.log("news The component was deactivated");
    clearInterval(this.timer);
  },
};
</script>

Summary