Vue页面之间跳转传值并解决页面数据不更新问题

目录

实现效果：

1首页代码Index

2数据模型data

3方法methods

4router/index.js中配置路由

5数据资产目录页面index111

6数据模型data

7vue 路由跳转 页面数据并没有更新

实现效果：

1首页代码Index

<!--前端搜索框--><div class="search"><el-input placeholder="请输入内容"v-model="queryInfo.query"clearable@clear="getDataList1"><el-button slot="append" icon="el-icon-search" @click="getDataList1" style="color: blue"></el-button></el-input></div>

2数据模型data

data() {return {queryInfo: {//查询参数query: '',// 当前页码pagenum: 1,// 每页显示条数pagesize: 8}}

3方法methods

methods: {/* 首页点击搜索直接进行跳转到另一个页面* */getDataList1() {this.$router.push({path: '/index111', //另一个页面的路由地址query: {params:this.queryInfo.query}, //传递的参数}); }}

4router/index.js中配置路由

/* 首页的路由* */{path: '',component: Layout,redirect: 'index',children: [{path: 'index',component: () => import('@/views/index'),name: 'Index',meta: { title: '首页', icon: 'dashboard', affix: true }}]},/* 跳转到新的页面的路由* */{path: '',component: Layout,redirect: 'index111',children: [{path: 'index111',component: () => import('@/views/index111'),name: 'index111',meta: { title: '数据资产目录', icon: 'dashboard', affix: true },//addprops: route => ({param: route.query.params})}]},

5数据资产目录页面index111

created() { //钩子函数//页面一加载就将首页传递的参数赋值给搜索框this.getDataListCurrent()},

6数据模型data

data() {return {queryInfo: {//查询参数query: '',// 当前页码pagenum: 1,// 每页显示条数pagesize: 8}}}

         使用this.$route.query.params;获取到首页index.vue传递的参数赋值给当前页面搜索框this.queryInfo.query

 //将另一个页面传递的参数传递到当前页面getDataListCurrent() {this.queryInfo.query = this.$route.query.params;this.getDataList()//这个方法是去根据关键字去后端获取数据集合的},

问题来了，就是只有当页面刷新一次，点击首页搜索才会传值到数据资产目录页面。

7vue 路由跳转 页面数据并没有更新

怎么回事呢？

由于 vue-router 使用了 keep-alive组件，被缓存了。
vue-router的切换不同于传统的页面切换，而是路由之间的切换，其实就是组件之间的切换，引用相同组件的时候，会直接调用缓存而不会调用created()，mounted()函数。

第一种方法：使用生命周期函数 ：activated  （在这里面更新数据，或者清空数据）

activated() {this.getDataListCurrent()},

第二种：在watch中监听路由变化，对router进行监控，当router发生变化时，执行初始化界面方法

//监听函数
watch: {'$route' () {this.getDataListCurrent();}},