The introduction

In most people’s page development, the data needed to render a page is obtained through interface calls in Created. Then, in a recent development, the editor had a requirement to render the original data presentation in any scenario when selecting the page from the menu bar. In a word, jump to the current page again to trigger our rendering data flow.

The Created/Mounted lifecycle is re-triggered only after a page is updated to the router. So, how do we implement our interface function from /routeA => /routeA and trigger initialization?

1. No trace refresh

In this scenario, we can refresh the page and trigger the flow. However, there will be a blank screen when you refresh the page, and the user experience is not good. So try to do as much as possible traceless refresh effect. Vue do traceless refresh, I am through this blog to learn the method of proviede and inject combination. => Vue refreshes the current page or when switching to another page

In the App. In vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: "App".provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true; }); }}};</script>

<style>
</style>

Copy the code

In the component that will use the refresh,

<script>
export default {
  inject: ['reload'].data() {
    return {};
  },
  methods: {
      refresh(){
          this.reload(); }}}; </script>Copy the code

The effect is as follows:

The downside of this traceless refresh is that it only eliminates the blank screen of the manual refresh, but it still reloads images and other files. It takes longer and the experience is not great.

2. Access relevant APIS through router-view and REF in the way of parent-child component communication.

DOM: < the router - view ref ="Router_Son"/> JS:menu_select(index, indexPath) {
     var path = "/portal/" + index;
     if (indexPath && indexPath[1] = ="hole_query") {
        this.$router.push({
          path: path
        });
        this.$store.commit("Hole_ListStatus");
        this.$store.commit("Hole_CurrentPage".null);
        this.$store.commit("Hole_Back".false);
        if (this.$refs.Router_Son.holeList_inital) {
          this.$refs.Router_Son.holeList_inital(); }}}, vulnerability query:methods: {holeList_inital(){}},created(){
    this.holeList_inital();
}
Copy the code

The idea at that time was: WHAT I need is to change the data stored by VUEX when I click the vulnerability query in the menu, and then call the initialization function of the vulnerability query page to achieve the function I need. Vue is implemented by routing the pages in my child component called vulnerability query in my parent component (which has these common menus, footers, etc.). This is parent-child component communication ~ EMM

This.$refs.router_son.holelist_inital ();

One small detail to note here is that Router_Son is like a child component in the child route (I’m not being very technical), and when you click the vulnerability query in the menu bar to jump to the vulnerability query page, our child component contains the holeList_inital function. If you click the vulnerability query in the menu bar to jump to another page, this function is not included. To reduce the number of errors, an if judgment is needed. The effect is as follows:

3. The way of route guard to judge

Because xiaobian is also just graduated, mainly for Baidu development, haha. And what we learned then was that there was another way to do that was to use the route guard. The guards inside the component are: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave, but not for my scenario. => Official file of the route guard

BeforeRouteUpdate: The official description is this:beforeRouteUpdate(to, from, next) {
    // Called when the current route changes but the component is being reused
    // For example, for a path /foo/:id with dynamic parameters, when jumping between /foo/1 and /foo/2,
    // Since the same Foo component will be rendered, the component instance will be reused. And the hook will be called in that case.
    // Access component instance 'this'}, for this scenario:/portal/hole_query? id=1= >/portal/hole_query? id=Awesome!However, as we are in the security industry, the test report was relatively strict in the previous projects. I then used vuex in my project, not Query, so as not to expose the parameters obviously. So I'm not going to do that, but if you have a situation like this, you can try routing guard.Copy the code

4. The tail

Thank you for being here, haha. Writing for the first time, I hope you don’t hesitate to comment on the shortcomings. =