记录vue项目中遇到的问题

原创已于 2022-12-03 19:08:27 修改 · 800 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端框架

于 2022-11-28 16:07:55 首次发布

本文记录了一位开发者在Vue.js项目中遇到的问题及解决方法，涉及路由参数传递、Vuex状态管理、API请求、登录注册、导航守卫、ElementUI使用等方面，通过实例详细阐述了解决方案。

开发某一个产品的详情页面

静态页面
发请求
vuex
动态展示组件

1.点击产品的图片的时候，跳转到详情页面，在路由跳转的时候需要带上产品的ID给详情页面，且是params参数

在路由跳转的时候带商品ID

跳转到详情页面后，滚动条在底部，vue-router的解决办法，返回的y=0，代表的是滚动条在最上方

2. API请求接口

3.vuex获取产品详细信息

state.goodInfo初始状态是空对象，空对象的categoryView属性值是undefined

并上一个空对象，当网络卡顿数据还没有加载出来，返回的就是一个空对象

如果服务器数据没有回来，skuInfo这个对象是一个空对象

使用了和硅谷老师一样的方法还是报上面那个警告：Cannot read properties of undefined (reading '0')

最后v-if加了个判断

加入购物车

在点击加入购物车这个按钮的时候，需要将参数带给服务器（发请求），通知服务器加入购物车的产品是谁。

派发一个action

请求成功，进行路由跳转，如果失败，给出错误提示

注册添加购物车成功的路由

路由跳转

this.$router.push({ name: "addcartsuccess" });

在进行路由跳转的时候还需要将产品的信息带给下一级的路由组件

AddCartSuccess组件接受会话存储的数据

当点击查看详情页时，要带着产品的id跳转到详情页

向服务器发起ajax请求，获取购物车数据，操作vuex三连环，组件获取数据展示数据

在发请求的时候，获取不到你购物车里面的数据，因为服务器不知道你是谁--使用UUID临时游客身份,且UUID只生成一次永久保存

但此时详情页跳转到添加购物车成功页面时，只允许携带两个参数skuId /skuNum

解决办法，在请求头添加参数！这个userTempId是后端人员写好的，一定不能写错，不然返回的数据为空。

复习删除所有选中商品与修改全部产品的选中状态

登录与注册

登录与注册功能（git）

--assets文件夹---放置全部组件公用静态资源

在样式中也可以使用@【src别名】，还要在其前面加上~

注册功能

点击获取验证码按钮，发起请求

vuex三连环

派发action

commit

修改state中的数据

// 将组件的code属性值变为仓库中验证码

this.code = this.$store.state.user.code

点击注册按钮请求成功进行路由跳转

登录功能

当注册成功后跳转到登录页面

点击登录按钮发起请求，跳转home页面

登录跳转到home首页时，需要携带用户的唯一标识token，才能在Header头部显示用户名

在请求头加上token

此时出现了一个新的问题，页面刷新，获取不到用户信息--即获取不到token

因为vuex是非持久化存储----解决----本地存储

退出登录

1.需要发请求，通知服务器退出登录【清楚数据：token】

2.清除项目中的数据【userInfo、token】

导航守卫

1.全局守卫：只要发生路由变化，守卫就能监听到使用全局前置守卫解决在非home页面刷新，用户信息为空的问题

// 全局守卫，前置守卫（在路由跳转之前进行判断）

router.beforeEach(async(to, form, next) => {

    // to:可以获取到你要跳转到哪个路由信息

    // from:可以获取到你从哪个路由而来的信息

    // next:放行函数

    // next()

    // 用户登录了，才会有token，未登录一定不会有token

    let token = store.state.user.token;

    // 用户信息

    let name = store.state.user.userInfo.name

        // 用户已经登录了

    if (token) {

        // 用户已经登录了还想去login页面

        if (to.path == '/login') {

            next('/')

        } else {

            // 登录，去的不是login【home|search|detail|shopcart】

            // 如果用户名已有

            if (name) {

                next()

            } else {

                // 没有用户信息，派发action让仓库存储用户信息再跳转

                try {

                    await store.dispatch('getUserInfo')

                    next()

                } catch (error) {

                    // token失效了获取不到用户信息，重新登录

                    // 清除token

                    await store.dispatch("userLogOut");

                    next('/login');

                }

            }

        }

    } else {

       // 未登录:不能到交易相关、不能到【pay|paysuccess】、不能去个人中心
        let toPath = to.path
        if (toPath.indexOf('/trade') != -1 || toPath.indexOf('/pay') != -1 || toPath.indexOf('/center') != -1) {
            //  把未登录的时候想去而没有去成的信息，存储于地址栏中【路由】
            next('/login?redirect=' + toPath)
        } else {
            next()
        }

    }

})