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

9. 路由跳转的 replace 方法

1. 作用：控制路由跳转时操作浏览器历史记录的模式

2. 浏览器的历史记录有两种写入方式：push 和 replace

    push 是追加历史记录

    replace 是替换当前记录，路由跳转时默认为 push 方式

3. 开启 replace 模式

<router-link :replace="true" ...>News</router-link>

简写：<router-link replace ...>News</router-link>

总结：浏览记录本质是一个栈，默认 push ，点开新页面就会在栈顶追加一个地址，后退，栈顶指针向下移动，改为 replace就是不追加，而将栈顶地址替换

        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>
    <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Home'
  }
</script>

2. 编程式路由导航（不用 <router-link> ）

作用：不借助 <router-link> 实现路由跳转，让路由跳转更加灵活

this.$router. push({})        内传的对象与 <router-link> 中的 to 相同

this.$router. replace({})

this.$router. forward()       前进

this.$router. back()            后退

this.$router. go(n)              可前进也可后退

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

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

        src/compoents/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>

3. 缓存路由组件

作用： 让不展示的路由组件保持挂载，不被销毁

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

  <keep-alive include="['News',  'Message']"><router-view><router-view></router-view></keep-alive>

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

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

        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>