30，购物车用户登录需要刷新才能显示 vue页面缓存和不缓存的方法 无数据显示页 路由跳转this.$router.replace。push.go的区别

没有数据 显示 没有数据

出现错误

 

把Tabbar.vue

methods: {
    switchTab(path) {
      //判断是否点击的是同一个路由
      if (this.$route.path == path) return;
      //对应跳转页面
      this.$router.replace(path);
    },
  },

replace 换成 push

1.this.$router.push()

描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。

用法：

2.this.$router.replace()

描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
 

 解决新用户登录刷新才能显示购物车数据   

  vue2.0页面缓存和不缓存的方法 

// 模板中：
<div class="home">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>


// 路由配置中：

[
        {
          path: 'main',
          name: 'main',
          component: main,
          meta: { keepAlive: false } // false为不缓存
        },
        {
          path: 'orderSearch',
          name: 'orderSearch',
          component: orderSearch,
          meta: { keepAlive: false } // false为不缓存
        }
]

app.vue

<template>
  <div id="app">
    <!-- //要缓存的路由 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>

    <!-- //不要缓存的路由 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

router.js

 

  {
    path: "/detail",
    name: "Detail",
    meta: { keepAlive: false }, // false为不缓存
    component: () => import("../views/Detail.vue"),
  },

登录进入购物车  自动显示数据  问题解决