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 },
        //add
        props: 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();
    }
  },