vue2进阶篇：vue-router之缓存路由组件

2024-10-10 16

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue2进阶篇：vue-router之缓存路由组件

@[toc]

10.11缓存路由组件

注意点1：
\用于路由缓存，其中inclue用于指定只缓存指定名称的组件，其中News指代一定是“组件名”，指代一定是“组件名”，指代一定是“组件名”，重要的事情说3遍。

注意点2：

缓存一个路由组件

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

缓存多个路由组件

<keep-alive :include="['News','Message']">

案例：将案例改为“缓存路由组件”

完整代码

完整项目路径

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
   
    el:'#app',
    render: h => h(App),
    router:router
})

App.vue

<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
                    <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

                    <!-- Vue中借助router-link标签实现路由的切换 -->
                    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
                        <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Banner from './components/Banner'
    export default {
   
        name:'App',
        components:{
   Banner}
    }
</script>

index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
   
    routes:[
        {
   
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
   
            path:'/home',
            component:Home,
            children:[
                {
   
                    path:'news',
                    component:News,
                },
                {
   
                    path:'message',
                    component:Message,
                    children:[
                        {
   
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,

                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true

                            //props的第三种写法，值为函数
                            props($route){
   
                                return {
   
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

About.vue

<template>
    <h2>我是About的内容</h2>
</template>

<script>
    export default {
   
        name:'About',
        /* beforeDestroy() {
            console.log('About组件即将被销毁了')
        },*/
        /* mounted() {
            console.log('About组件挂载完毕了',this)
            window.aboutRoute = this.$route
            window.aboutRouter = this.$router
        },  */
    }
</script>

Home.vue

<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="['News','Message']"> -->

            <!-- 缓存一个路由组件 -->
            <keep-alive include="News">
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>
    export default {
   
        name:'Home',
        /* beforeDestroy() {
            console.log('Home组件即将被销毁了')
        }, */
        /* mounted() {
            console.log('Home组件挂载完毕了',this)
            window.homeRoute = this.$route
            window.homeRouter = this.$router
        },  */
    }
</script>

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',
        beforeDestroy() {
   
            console.log('News组件即将被销毁了')
        },
    }
</script>

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>&nbsp;&nbsp; -->

                <!-- 跳转路由并携带params参数，to的对象写法 -->
                <router-link :to="{
   
                    name:'xiangqing',
                    query:{
   
                        id:m.id,
                        title:m.title
                    }
                }">
                    {
   {
   m.title}}
                </router-link>
                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(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: {
   
            pushShow(m){
   
                this.$router.push({
   
                    name:'xiangqing',
                    query:{
   
                        id:m.id,
                        title:m.title
                    }
                })
            },
            replaceShow(m){
   
                this.$router.replace({
   
                    name:'xiangqing',
                    query:{
   
                        id:m.id,
                        title:m.title
                    }
                })
            }
        },
        beforeDestroy() {
   
            console.log('Message组件即将被销毁了')
        },
    }
</script>

Detail.vue

<template>
    <ul>
        <li>消息编号：{
   {
   id}}</li>
        <li>消息标题：{
   {
   title}}</li>
    </ul>
</template>

<script>
    export default {
   
        name:'Detail',
        props:['id','title'],
        computed: {
   
            // id(){
   
            //     return this.$route.query.id
            // },
            // title(){
   
            //     return this.$route.query.title
            // },
        },
        mounted() {
   
            // console.log(this.$route)
        },
    }
</script>

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()
                // console.log(this.$router)
            },
            forward(){
   
                this.$router.forward()
            },
            test(){
   
                this.$router.go(3)
            }
        },
    }
</script>

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--  引入第三方样式-->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!--  配置网页标题-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>