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

6.9.路由跳转的 replace 方法

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：push和replace
   1. push是追加历史记录
   2. replace是替换当前记录，路由跳转时候默认为push方式
3. 开启replace模式
   1. <router-link :replace=“true” …>News</router-link>
   2. 简写<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",
        beforeDestroy() {
            console.log("Home组件即将被销毁了");
        },
        mounted() {
            console.log("Home组件挂载完毕了", this);
        }
    }
</script>

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

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

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

this.$router.replace({})

this.$router.forward() 前进

this.$router.back() 后退

this.$router.go(n) 可前进也可后退，n为正数前进n，为负数后退

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

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

src/components/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(-2);
            }
        }
    }
</script>

src/pages/Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- 跳转并携带params参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}} </router-link> -->

                <!-- 跳转路由并携带params参数，to的对象写法 -->
                <router-link :to="{
                    name:'detail',
                    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: "Message",
        data() {
            return {
                messageList:[
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'}
                ]
            }
        },
        methods:{
            showPush(m){
                this.$router.push({
                    name:'detail',
                    params:{
                        id:m.id,
                        title:m.title
                    }
                })
            },
            showReplace(m){
                this.$router.replace({
                    name:'detail',
                    params: {
                        id:m.id,
                        title:m.title
                    }
                })
            }
        }
    }
</script>

6.11.缓存路由组件

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

<keep-alive include=“News”><router-view></router-view></keep-alive>

<keep-alive :include=“[‘News’, ‘Message’]”><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</li>
        <li>news002</li>
        <li>news003</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>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home",
        beforeDestroy() {
            console.log("Home组件即将被销毁了");
        },
        mounted() {
            console.log("Home组件挂载完毕了", this);
        }
    }
</script>