Vue-Router replace 编程式导航 缓存路由组件

• 路由跳转的replace方法
  1.作用：控制路由跳转时操作浏览器历史记录的模式
  2.浏览器的历史记录有两种写入方式：push和replace
  push是追加历史记录
  replace是替换当前记录，跳转路由时默认是push
  3.开启replace模式
  <router-link :replace="true">----->可以简写成：<router-link replace>
  
  
• 编程式路由导航(不用<router-link>)
  
  1.this.$router.push('hash地址') ：跳转到指定页面，并增加一条历史记录
  2.this.$router.replace('hash地址') ：跳转页面，但不会新增历史记录，而是替换当前的历史记录
  3.this.$router.go(数值) ：历史记录前进或后退，正数前进，负数后退
  4.this.$router.forward() ：前进一步
  5.this.$router.back() ：后退一步
  
  demo
  src/componets/Banner.vue
  
  查看代码

  <template>
  	<div class="col-xs-offset-2 col-xs-8">
  		<div class="page-header">
  			<h2>Vue Router Demo</h2>
  			<button @click="back">后退</button>
  			<button @click="forward">前进</button>
  			<button @click="test">测试一下go</button>
  		</div>
  	</div>
  </template>
  
  <script>
  	export default {
  		name:'Banner',
  		methods:{
  			back(){
  				this.$router.back()
  			},
  			forward(){
  				this.$router.forward()
  			},
  			test(){
  				this.$router.go(3)
  			}
  		},
  	}
  </script>

  src/pages/Message.vue

  查看代码

  <template>
      <div>
          <ul>
              <li v-for="m in messageList" :key="m.id">
                  <router-link :to="{
                      name:'xiangqing',
                      params:{
                          id:m.id,
                          title:m.title
                      }
                  }">
                      {{m.title}}
                  </router-link>
                  <button @click="showPush(m)">push查看</button>
                  <button @click="showReplace(m)">replace查看</button>
              </li>
          </ul>
          <hr/>
          <router-view></router-view>
      </div>
  </template>
  
  <script>
      export default {
          name:'News',
          data(){
              return{
                  messageList:[
                      {id:'001',title:'消息001'},
                      {id:'002',title:'消息002'},
                      {id:'003',title:'消息003'}
                  ]
              }
          },
          methods:{
              showPush(m){
                  this.$router.push({
                      name:'xiangqing',
                      query:{
                          id:m.id,
                          title:m.title
                      }
                  })
              },
              showReplace(m){
                  this.$router.replace({
                      name:'xiangqing',
                      query:{
                          id:m.id,
                          title:m.title
                      }
                  })
              }
          }
      }
  </script>

   

• 缓存路由组件
  作用：让不展示的路由组件保持挂载,不被销毁|
  

  // 缓存一个路由组件
  <keep-alive include="News"> // include中写想要缓存的组件名，不写表示全部缓存
      <router-view></router-view>
  </keep-alive>
  
  // 缓存多个路由组件
  <keep-alive :include="['News','Message']"> 
      <router-view></router-view>
  </keep-alive>

  
  demo
  src/pages/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:'News'
      }
  </script>

  src/pages/Home.vue

  <template>
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul class="nav nav-tabs">
          <li><router-link replace class="list-group-item" active-class="active" 
                         to="/home/news">News</router-link></li>
          <li><router-link replace class="list-group-item" active-class="active" 
                         to="/home/message">Message</router-link></li>
      	</ul>
        <keep-alive include="News">
          <router-view></router-view>
      	</keep-alive>
      </div>
    </div>
  </template>
  
  <script>
      export default {
          name:'Home'
      }
  </script>