Router简单配置

新手笔记，如有错误，烦请指导

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: "/", //默认页面
        redirect: '/index' //重定向 访问a  url会被替换成b 匹配路由也为b  （默认页面设置）
    },
    {
        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 路由配置中设置
              meta:{
                  keepAlive:true
              }
             与下面的keep-alive配合使用，组件复用时不刷新
       -->
     <keep-alive>
         <router-view v-if="$route.meta.keepAlive">
             <!-- 保留缓存 -->
         </router-view>
     </keep-alive>
  </div>
</template>
<script>
export default {
  name: 'app',
  components:{}
}
</script>

默认页面 index.vue

<template>
    <div>
        <div>这是主页</div>
        
        <router-link to="/index/header">
            点击显示子路由 页面内容1
        </router-link>
        <hr />
        <router-link to="/index/header2">
            点击显示子路由 页面内容2
        </router-link>
        
        <router-view style="color: #BB1166;"> 
            <!-- 子路由内容显示区域 -->
        </router-view>
        
        <div style="color: #0000FF;" @click="toTest">
            跳转至重新渲染页面
        </div>
        
        <div style="color: #0000FF;" @click="toDataShow">
            跳转至保留状态页面
        </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>
            主页子内容1
        </div>
    </div>
</template>

image.png

子路由组件header2.vue

<template>
    <div>
        <div>
            主页子内容2
        </div>
    </div>
</template>

image.png

跳转至test.vue页面

image.png

非keep-live页面test.vue

<template>
    <div>
        <div>重复调用当前组件数据会 <span>进行重置</span></div>
        <input type="text" v-model="data"></input>
        <div @click="toIndex">返回</div>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data() {
            return {
                data: '3333' //默认值333
            }
        }
    }
</script>

初始默认值

image.png

修改输入框值

image.png
image.png
同样从主页index.vue点击 "跳转至保留状态页面" 跳转至dataShow.vue页面 进行测试

dataShow.vue

<template>
    <div>
        <div>重复调用当前组件数据<span>不会改变</span></div>
        <input type="text" v-model="data"></input>
        <div @click="toIndex">返回</div>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data() {
            return {
                data: '6666' //默认值666
            }
        }
    }
</script>

默认值为6666

image.png

修改输入框值

image.png
image.png
文件路径
image.png

2、当重复调用同一组件时，vue不会重新创建，而是进行复用。 此时会出现再次进入同一个页面时 之前的数据未清空（不会调用页面钩子函数）

解决办法

—(1)路由文件统一设置是否保持缓存
—(2)页面中利用watch监听路由变化

watch: {
    '$route' (val) {//复用组件时 钩子函数不会被调用 数据不会重新请求，通过监听路由参数变化判断
      if(val.query.id){//如果路由参数存在就调用方法
          this.getData(val.query.id);//调用请求函数
      }
      // 对路由变化作出响应...
    }
  }