Vue - Advanced Vue router routing (2) (replace attribute, programming route navigation, caching route components, and exclusive hooks for routes)

---

One 、router-link Of replace attribute

1. effect

Controls the mode of operating browser history when routing jumps .

2. Two ways to write

1. push： Append history .（ default setting ）
2. replace： Replace current record .

3. Turn on replace Pattern

	// Complete writing ：
	<router-link :replace="true" ...>News</router-link>
	// Abbreviation ：
	<router-link replace ...>News</router-link>

4. example ：【 The horns of a dilemma 】

replace Pattern

App.vue

1. replace There are two ways to write , Generally use the abbreviation .

	<router-link :replace="true" class="list-group-item" active-class="active" :to="{name: 'guanyu'}">About</router-link>
    <router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>

Two 、 Programming route navigation

1. effect

1. Don't use <router-link> Implement route jump , Make routing jump more flexible .
2. In addition to <a> , Other tags can also use route navigation （ Such as ：button etc. ）

2. Specific code

push

	this.$router.push({
    
	  name: 'xiangqing',
	  params: {
    
	    id: xxx,
	    title: xxx
	  }
	})

replace

	this.$router.replace({
    
	  name: 'xiangqing',
	  params: {
    
	    id: xxx,
	    title: xxx
	  }
	})

Forward

	this.$router.forward()

back off

	this.$router.back()

Forward or backward （ Custom steps ）

	this.$router.go(n) //n Integers ( just / negative )

3. example ： Use the button to jump

Programming route navigation

Banner.vue

	  <div class="page-header"><h2>Vue Router Demo</h2></div>
	  <button @click="back"> back off </button>
	  <button @click="forward"> Forward </button>
	  <button @click="test"> Two steps back </button>
	
	  methods: {
    
	    back() {
    
	      this.$router.back();
	    },
	    forward() {
    
	      this.$router.forward();
	    },
	    test() {
    
	      this.$router.go(-2);
	    }
	  }

Message.vue

	<button @click="pushShow(m)">push</button>
	<button @click="replaceShow(m)">replace</button>
	  
    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,
	      }
	    })
	  }
   }

3、 ... and 、 Cache routing components

1. effect

By default , Routing components that are not displayed will be automatically destroyed , Caching the routing components is to keep the routing components that are not displayed mounted , Not destroyed .

2. Specific code

Use <keep-alive> label , Note that it is written in the component for presentation .

include="myNews" To say only to News Component cache ,myNews It's defined News Component's name name .

	// Cache a routing component 
	<keep-alive include="myNews">
	    <router-view></router-view>
	</keep-alive>

	// Cache multiple routing components 
	<keep-alive :include="['myNews', 'myMessage']">
	    <router-view></router-view>
	</keep-alive>

3. example ： Cache for specified routes

The routing cache

News.vue

	<template>
	  <ul>
	    <li>news001 <input type="text"></li>
	    <li>news002 <input type="text"></li>
	    <li>news003 <input type="text"></li>
	  </ul>
	</template>
	
	<script>
	export default {
    
	  name: "myNews",
	  beforeDestroy(){
    
	    console.log('New Component is about to be destroyed ');
	  }
	};  
	</script>

Home.vue

1. If not <keep-alive> Middle configuration include attribute , that Home All routes shown in the component will be cached .
2. adopt include='xxx', We can specify the route to cache .

	<template>
	  <div>
	    <h2>Home Component content </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> 
	      <keep-alive include="myNews">
	        <router-view></router-view>
	      </keep-alive>
	    </div>
	  </div>
	</template>
	
	<script>
	export default {
    
	  name: "myHome",
	};
	</script>

Four 、 Two new life cycle hooks

1. effect

Routing components Unique Two hooks , Used to capture the activation status of routing components .

2. Specific name

1. activated： Routing component is Activation time Trigger .
2. deactivated： Routing component When inactivated Trigger .

3. example ： The route is not destroyed and the timer is deactivated

Two hooks for routing

News.vue

	<template>
	  <ul>
	    <li :style="{opacity}"> Study carefully 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: "myNews",
	  data(){
    
	    return{
    
	      opacity: 1
	    }
	  },
	  activated() {
    
	    console.log('News The component is activated ');
	    this.timer = setInterval(() => {
    
	      console.log('@');
	      this.opacity -= 0.01
	      if(this.opacity <=0 ) this.opacity = 1
	    },16)
	  },
	  deactivated() {
    
	    console.log('News The component is deactivated ');
	    clearInterval(this.timer)
	  }
	};  
	</script>

Home.vue

	<keep-alive include="myNews">
      <router-view></router-view>
    </keep-alive>

Every step is worth a thousand miles Not small flow into the sea

Don't get lost by paying attention , Ongoing update …