新手筆記，如有錯(cuò)誤此再，煩請指導(dǎo)

1抑月、路由配置

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入路由配置
import router from './router'
Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
// 引入組件
import index from "@/pages/index/index.vue"; 
import test from "@/pages/test/test.vue";
import header from "@/pages/index/header.vue";
import header2 from "@/pages/index/header2.vue";
import dataShow from "@/pages/test2/dataShow.vue";
// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
    {
        path: "/", //默認(rèn)頁面
        redirect: '/index' //重定向 訪問a  url會(huì)被替換成b 匹配路由也為b  （默認(rèn)頁面設(shè)置）
    },
    {
        path: "/index",
        component: index,
        // component: ()=>import('@/pages/index/index.vue') 
        // component:resolve=>require(['@/pages/index/index.vue'],resolve)//懶加載  (懶加載不需要import組件引入)
        children: [//子路由配置 
            {
                path: '/index/header',
                component: header
            },
            {
                path: '/index/header2',
                component: header2
            }
        ]
    },
    {
        path: "/test",
        component: test
    },
    {
        path: "/dataShow",
        component: dataShow,
        meta:{
            keepAlive:true
        }
    }
]

var router = new VueRouter({
    routes
})
export default router;

App.vue

<template>
  <div id="app">
     <router-view v-if="!$route.meta.keepAlive"> <!--判斷meta.keepAlive是否存在,以此加載不同組件-->
         <!--重新渲染-->
     </router-view>
        
      <!--    router/index.js 路由配置中設(shè)置
              meta:{
                  keepAlive:true
              }
             與下面的keep-alive配合使用违崇，組件復(fù)用時(shí)不刷新
       -->
     <keep-alive>
         <router-view v-if="$route.meta.keepAlive">
             <!-- 保留緩存 -->
         </router-view>
     </keep-alive>
  </div>
</template>
<script>
export default {
  name: 'app',
  components:{}
}
</script>

默認(rèn)頁面 index.vue

<template>
    <div>
        <div>這是主頁</div>
        
        <router-link to="/index/header">
            點(diǎn)擊顯示子路由 頁面內(nèi)容1
        </router-link>
        <hr />
        <router-link to="/index/header2">
            點(diǎn)擊顯示子路由 頁面內(nèi)容2
        </router-link>
        
        <router-view style="color: #BB1166;"> 
            <!-- 子路由內(nèi)容顯示區(qū)域 -->
        </router-view>
        
        <div style="color: #0000FF;" @click="toTest">
            跳轉(zhuǎn)至重新渲染頁面
        </div>
        
        <div style="color: #0000FF;" @click="toDataShow">
            跳轉(zhuǎn)至保留狀態(tài)頁面
        </div>
        
    </div>
</template>
<script>
    export default{
        name:'index',
        data(){
            return{}
        },
        methods:{
            toTest(){
                this.$router.push({path:'/test'})
            },
            toDataShow(){
                this.$router.push({path:'/dataShow'})
            }
        }
    }
</script>

子路由組件header.vue

<template>
    <div>
        <div>
            主頁子內(nèi)容1
        </div>
    </div>
</template>

image.png

子路由組件header2.vue

<template>
    <div>
        <div>
            主頁子內(nèi)容2
        </div>
    </div>
</template>

image.png

跳轉(zhuǎn)至test.vue頁面

image.png

非keep-live頁面test.vue

<template>
    <div>
        <div>重復(fù)調(diào)用當(dāng)前組件數(shù)據(jù)會(huì) <span>進(jìn)行重置</span></div>
        <input type="text" v-model="data"></input>
        <div @click="toIndex">返回</div>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data() {
            return {
                data: '3333' //默認(rèn)值333
            }
        }
    }
</script>

初始默認(rèn)值

image.png

修改輸入框值

image.png

image.png

dataShow.vue

<template>
    <div>
        <div>重復(fù)調(diào)用當(dāng)前組件數(shù)據(jù)<span>不會(huì)改變</span></div>
        <input type="text" v-model="data"></input>
        <div @click="toIndex">返回</div>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data() {
            return {
                data: '6666' //默認(rèn)值666
            }
        }
    }
</script>

默認(rèn)值為6666

image.png

修改輸入框值

image.png

image.png

image.png

2、當(dāng)重復(fù)調(diào)用同一組件時(shí)靴跛，vue不會(huì)重新創(chuàng)建缀雳，而是進(jìn)行復(fù)用。 此時(shí)會(huì)出現(xiàn)再次進(jìn)入同一個(gè)頁面時(shí) 之前的數(shù)據(jù)未清空（不會(huì)調(diào)用頁面鉤子函數(shù)）

解決辦法

—(1)路由文件統(tǒng)一設(shè)置是否保持緩存
—(2)頁面中利用watch監(jiān)聽路由變化

watch: {
    '$route' (val) {//復(fù)用組件時(shí) 鉤子函數(shù)不會(huì)被調(diào)用 數(shù)據(jù)不會(huì)重新請求梢睛，通過監(jiān)聽路由參數(shù)變化判斷
      if(val.query.id){//如果路由參數(shù)存在就調(diào)用方法
          this.getData(val.query.id);//調(diào)用請求函數(shù)
      }
      // 對路由變化作出響應(yīng)...
    }
  }