解决一些问题 实现代码如下
<template><div class="cart container"><header @click="$router.back()"><i class="iconfont icon-a-huaban1fuben44"></i><span>购物车</span><span>编辑</span></header><section><!-- <section v-if="list.length"> --><div class="cart-title"><van-checkbox v-model="checked"></van-checkbox><span>商品</span></div><ul><li v-for="(item,index) in list" :key="index"><!-- {{item}} --><div class="check"><van-checkbox v-model="checked"></van-checkbox></div><h2><img :src="item.imgUrl" alt="" /></h2><div class="goods"><div class="goods-title"><span>{{item.goods_name}}</span><i class="iconfont icon-shanchu1"></i></div><div class="goods-price">￥{{item.goods_price}}</div><van-stepper v-model="item.goods_num" integer /></div></li></ul><!-- <section v-else>没有购物车数据<router-link to="/home">去首页逛逛吧</router-link></section> --><h1>没有购物车数据<router-link to="/home">去首页逛逛吧</router-link></h1></section><footer><div class="radio"><van-checkbox v-model="checked"></van-checkbox></div><div class="total"><div>共有<span class="total-active">1</span>件商品</div><div><span>总计:</span><span class="total-active">￥128.00+0茶币</span></div></div><div class="order">去结算</div></footer><!-- <Tabbar></Tabbar> --></div>
</template><script>import http from '@/common/api/request.js'import {mapState,mapMutations} from 'vuex';export default {name: "Cart",data() {return {checked: true}},// 调用 获取 list 的值computed: {...mapState({list: state => state.cart.list})},created() {// console.log(11);this.getData();},methods: {// 使用这个方法...mapMutations(['cartList']),// 前端给后端发送请求，查询某个用户async getData() {// 发送请求let res = await http.$axios({// 前端给后端查询购物车数据接口发送请求url: '/api/selectCart',method: 'POST',// 查询当前用户购物车数据，要带上 tokenheaders: {token: true}});// console.log(res.data);this.cartList(res.data);}}}
</script><style scoped lang="scss">header {display: flex;// 左中右结构justify-content: space-between;// 垂直居中align-items: center;height: 44px;color: #fff;background-color: #b0352f;i {padding: 0 20px;font-size: 24px;}span {padding: 0 20px;font-size: 16px;}}section {background-color: #f5f5f5;.cart-title {display: flex;padding: 20px;span {padding: 0 15px;font-size: 18px;font-weight: 500;}}ul {display: flex;flex-direction: column;li {display: flex;justify-content: space-between;align-items: center;margin: 8px 0;padding: 6px 20px;background-color: #fff;.check {padding-right: 10px;}.goods {display: flex;flex-direction: column;justify-content: space-between;padding-left: 15px;font-size: 12px;.goods-title {display: flex;i {font-size: 24px;}}.goods-price {padding: 3px 0;color: #b0352f;}::v-deep .van-stepper {text-align: right;}}img {width: 74px;height: 74px;}}}}footer {display: flex;justify-content: space-between;align-items: center;height: 50px;border-top: 2px solid #ccc;.radio {padding: o 15px;}.total {flex: 1;font-size: 18px;font-weight: 500;.total-active {color: #b0352f;}}.order {width: 120px;line-height: 50px;font-size: 18px;font-weight: 500;color: #fff;text-align: center;background-color: #b0352f;}}
</style>2, src/App.vue
<template><div id="app"><!-- <keep-alive><router-view></router-view></keep-alive> --><!-- 要 缓存路由的页面 --><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不 缓存路由的页面 --><router-view v-if="!$route.meta.keepAlive"></router-view></div>
</template><script>export default {created() {// this.$store.commit('INIT_USER');this.$store.commit('initUser');}}
</script>3, src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";Vue.use(VueRouter);const routes = [{path: "/home",name: "Home",component: Home,},{path: "/",redirect: "/home", // 重定向}, {path: "/list",name: "List",component: () =>import("../views/List.vue"),}, {path: "/cart",name: "Cart",component: () =>import("../views/Cart.vue"),}, {path: "/my",name: "My",component: () =>import("../views/My.vue"),},{path: "/search",children: [{path: "/",name: "index",component: () =>import("../views/search/Search-index.vue"),}, {path: "/search/list",name: "Search-list",component: () =>import("../views/search/Search-list.vue"),}],component: () =>import("../views/Search.vue"),},{path: "/detail",name: "Detail",meta: {keepAlive: true, // 此组件需要被缓存},component: () =>import("../views/Detail.vue"),},{path: "/login",name: "Login",component: () =>import("../views/login/Login.vue"),},{path: "/userLogin",name: "UserLogin",component: () =>import("../views/login/UserLogin.vue"),},{path: "/register",name: "Register",component: () =>import("../views/login/Register.vue"),},{path: "/recovery",children: [{path: "/",name: "RecoveryIndex",component: () =>import("../views/recovery/RecoveryIndex.vue"),}, {path: "/recovery/btn",name: "RecoveryBtn",component: () =>import("../views/recovery/RecoveryBtn.vue"),}],component: () =>import("../views/recovery/Recovery.vue"),},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;4, src/views/UserLogin
<template><div class="login container"><!-- <button @click="USER_LOGIN">测试</button> --><Header></Header><section><div class="login-tel"><input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*" /></div><div class="login-tel"><input type="text" v-model="userPwd" placeholder="请输入密码" pattern="[0-9]*" /></div><div class="login-btn" @click="login">登录</div><div class="login_tab"><span @click="goLogin">短信登录</span><span @click="goRecovery">找回密码</span><span @click="goRegister">快速注册</span></div></section><Tabbar></Tabbar></div>
</template><script>import Tabbar from '@/components/common/Tabbar.vue';import Header from '@/views/login/Header.vue';import http from '@/common/api/request.js';import {Toast} from 'mint-ui';import {mapMutations} from 'vuex';export default {data() {return {// 用户输入数据userTel: '', // 用户输入的手机号userPwd: '', // 用户输入的密码// 验证规则rules: {// 验证手机号userTel: {rule: /^1[23456789]\d{9}$/,msg: '手机号不能为空，并且是11位数字'},// 密码验证userPwd: {rule: /^\w{6,18}$/,msg: '密码不能为空，并且要求6,18位字母数字'}}}},components: {Header,Tabbar},methods: {// 挂载方法...mapMutations(['userLogin']),// 点击登录按钮login() {// 前端先验证if (!this.validate('userTel')) return;if (!this.validate('userPwd')) return;// 验证通过以后前端再发送请求，给后端验证http.$axios({// url: '/login',url: '/api/login',method: 'POST',data: { // 前端向后端传递用户输入的数据userTel: this.userTel,userPwd: this.userPwd}}).then(res => { // 后端返回给前端的数据// console.log(res);// 提示信息Toast(res.msg);// 登录失败if (!res.success) return;// 登录成功 跳转页面 ==> 存储用户信息// console.log(res.data);this.userLogin(res.data);// 跳转到我的页面中this.$router.push('/my');// 跳转到上一级目录中// this.$router.back();})},// 注册 点击'快速注册'跳转到注册页面goRegister() {this.$router.push('/register');},// 点击 '忘记密码 ' 跳转到找回密码页面goRecovery() {this.$router.push('/recovery');},// 短信登录 点击'短信登录' 跳转到短信登录页面goLogin() {this.$router.push('/login');},// 验证信息提示validate(key) {// key为 'userTel' 或者 'userPwd'let bool = true;if (!this.rules[key].rule.test(this[key])) {// 提示信息 this.rules[key]=resToast(this.rules[key].msg);bool = false;return false;}return bool;}}}
</script><style scoped lang="scss">section {display: flex;flex-direction: column;align-items: center;background-color: #f5f5f5;div {margin: 30px 0;width: 335px;height: 44px;font-size: 14px;}.login-tel {margin-top: 30px;input {width: 335px;}}input {box-sizing: border-box;padding: 0 10px;line-height: 44px;background-color: #FFFFFF;border: 1px solid #ccc;border-radius: 6px;}.login-btn {line-height: 44px;text-align: center;color: #fff;font-size: 20px;background-color: #b0352f;border-radius: 6px;}.login_tab {display: flex;justify-content: space-between;font-size: 16px;}}
</style>
vue的keep-alive缓存不缓存如何配置
1.首先点进去App.vue,将你写的keep-alive改为以下代码：
<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>
2.在你的路由跳转组件配置中这样写，true代表缓存，false代表不缓存（重点是加上meta里面的值，其他的都是你自己配置的路由）
{path:'/detail',name:'Detail',meta: {keepAlive: true, //代表需要缓存},component:()=>import('../views/Detail.vue'),},
{path: "/cart",name: "Cart",meta: {keepAlive: true, // 此组件需要被缓存},component: () =>import("../views/Cart.vue"),
}
以上就是解决缓存问题的实现代码
