Vue —— 进阶 vue-router 路由（二）（replace属性、编程式路由导航、缓存路由组件、路由的专属钩子）

---

一、router-link 的 replace 属性

1. 作用

控制路由跳转时操作浏览器历史记录的模式。

2. 两种写入方式

1. push：追加历史记录。（默认设置）
2. replace：替换当前记录。

3. 开启 replace 模式

	//完整写法：
	<router-link :replace="true" ...>News</router-link>
	//简写：
	<router-link replace ...>News</router-link>

4. 实例：【进退两难】

replace模式

App.vue

1. replace 有两种编写方式，一般使用简写。

	<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>

二、编程式路由导航

1. 作用

1. 不借助 <router-link> 实现路由跳转，让路由跳转更加灵活。
2. 这样除了 <a> ，其他标签也可以使用路由导航（如：button等）

2. 具体编码

push

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

replace

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

前进

	this.$router.forward()

后退

	this.$router.back()

前进或后退（自定义步数）

	this.$router.go(n) //n为整数(正/负)

3. 实例：使用按钮实现跳转

编程式路由导航

Banner.vue

	  <div class="page-header"><h2>Vue Router Demo</h2></div>
	  <button @click="back">后退</button>
	  <button @click="forward">前进</button>
	  <button @click="test">后退两步</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,
	      }
	    })
	  }
   }

三、缓存路由组件

1. 作用

默认情况下，不展示的路由组件是会自动销毁的，缓存路由组件就是让不展示的路由组件保持挂载，不被销毁。

2. 具体代码

使用 <keep-alive> 标签，注意是写在用于展示的组件里。

include="myNews" 表示只对 News 组件缓存，myNews 是定义的 News 组件的 name 名。

	//缓存一个路由组件
	<keep-alive include="myNews">
	    <router-view></router-view>
	</keep-alive>

	//缓存多个路由组件
	<keep-alive :include="['myNews', 'myMessage']">
	    <router-view></router-view>
	</keep-alive>

3. 实例：对指定路由的缓存

路由缓存

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组件即将被销毁');
	  }
	};  
	</script>

Home.vue

1. 如果不在 <keep-alive> 中配置 include 属性，那么 Home 组件中展示的所有路由都会缓存。
2. 通过 include='xxx'，我们可以指定要缓存的路由。

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

四、两个新的生命周期钩子

1. 作用

路由组件所 独有的 两个钩子，用于捕获路由组件的激活状态。

2. 具体名字

1. activated：路由组件被 激活时 触发。
2. deactivated：路由组件 失活时 触发。

3. 实例：路由不被销毁并让定时器失活

路由的两个钩子

News.vue

	<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: "myNews",
	  data(){
    
	    return{
    
	      opacity: 1
	    }
	  },
	  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>

Home.vue

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

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…