Vue2项目实战：尚品汇（五）个人中心页面、导航守卫、懒加载、结束

目录

(一)个人中心页面

1.拆分二级路由：我的订单，团购订单

2.我的订单

(1)请求数据动态展示

(2)分页器组件

(二)导航守卫

1.全局路由守卫

2.独享路由守卫

3.组件内路由守卫

(三)懒加载

1.图片懒加载

2.路由懒加载

(四）结束

---

(一)个人中心页面

1.拆分二级路由：我的订单，团购订单

在个人中心中，有我的订单和团购订单，可以拆分为center组件的子路由，再将/center重定向为/center/myorder

在router/routes中：
{
        name: 'Center',
        path: '/center',
        component: Center,
        meta: { showFooter: true, showInput: false },
        children: [ //嵌套路由
            {
                name: 'MyOrder',
                path: 'myorder',
                component: MyOrder,
            },
            {
                name: 'GroupOrder',
                path: 'grouporder',
                component: GroupOrder,
            },
            {
                path: '/center',
                redirect: '/center/myorder' // 重定向为myorder
            }
        ]
    },

2.我的订单

(1)请求数据动态展示

// 发送请求获取我的订单数据 get请求
export const myOrderList = (page, limit) => requests.get(`/order/auth/${page}/${limit}`)

data() {
        return {
            page: 1,//当前所在页码 默认1
            limit: 6,//每页限制展示商品数
            recordList: [],
            total: 0,//总商品数
            pages: 0,//总页数
        }
    },
methods: {
        // 获取我的订单的数据
        async getMyOrderData() {
            let result = await this.$api.myOrderList(this.page, this.limit)
            if (result.code == 200) {
                this.recordList = result.data.records
                this.total = result.data.total
                this.limit = result.data.size
                this.page = result.data.current
                this.pages = result.data.pages
            }
        },
},
mounted() {
        this.getMyOrderData()
    },

(2)分页器组件

直接调用之前拆分好的公共组件，将props参数传给分页器，再使用自定义事件getPageNo重新传参获取数据 

<!-- 分页器 -->
<pagination :pageSize="limit" :pageNo="page" :total="total" :totalPages="pages"     
    :continues="3" @getPageNo="getPageNo">
</pagination>

methods:{
    // 跳转到指定页码 组件自定义事件 子传父
    getPageNo(page) {
        // 没有上一页或没有下一页或点击所在页时
        if (page == 0 || page > this.pages || page == this.page) return
            this.page = page
            this.getMyOrderData()
            // 使用原生js将滚动条滚到最上方
            window.scrollTo(0, 0)
        },
}

(二)导航守卫

 这个项目中还有很多进路由的逻辑问题没有处理

1.全局路由守卫

原来header获取用户信息只在home路由挂载时调用，但在其他路由并重新刷新后header的用户信息就会消失，因此在全局前置路由守卫进行设置；

用户在已登录和未登录两种状态时，对路由的进入有不同的约束：

(1)用户登录后：不能再进入登录、注册页面；token失效后就清除数据重新登录等

在router/index中：
// 全局前置路由守卫
router.beforeEach((to, from, next) => {
    let token = store.state.User.token // 判断是否登录
    let name = store.state.User.userInfo.name // 用于判断用户数据是否存在 （空对象布尔值为真）
    if (token) { // 已登录
        if (to.path == '/login' || to.path == '/register') {
            next(false) // 已登录后试图进入注册登录页不会跳转
        } else { //去往其他组件
            if (name) { // 如果有userInfo 直接放行
                next()
            } else { // 没有就向服务器重新请求
                store.dispatch('getUserInfo').then(
                    () => { // 请求成功就放行
                        next()
                    }, (err) => { // token失效 需要删除本地存储的token重新登录
                        store.dispatch('clear') // 退出登录 清除token
                        next('/login') // 跳转到登录页
                    })
            }
        }
    } else { // 未登录状态 只能跳转到主页面、注册、登录、搜索、商品详情页面
        let toPath = to.path
        if (toPath.indexOf('/shopcart') != -1 || toPath.indexOf('/center') != -1) {
            // 携带原来访问的路径用query传给登录页面 登陆成功后又跳转回来
            next(`/login/?redirect=${toPath}`)
        } else { //其他页面直接放行
            next()
        }
    }
});

(2)未登录时：只能跳转到主页面、注册、登录、搜索、商品详情页面，访问其他路由会携带路由参数跳转到登录页面，登陆成功后再回到原来要访问的路由 

在pages/login中：
login() {
      this.$store.dispatch('login', { phone: this.phone, password: this.password }).then(res => {
        ...
        // 将query参数中保存的原来的路径拿出来 重新访问该路径，没有该参数就跳转到主页
        let toPath = this.$route.query.redirect || '/home'
        this.$router.push(toPath)
        ...
    }

2.独享路由守卫

trade、pay、paysuccess等组件不能直接通过地址栏路径被访问，只能通过特定路由被访问

在router/routes中：
{
        name: 'addcartsuccess',
        path: '/addcartsuccess',
        component: AddCartSuccess,
        meta: { showFooter: true, showInput: false },
        // 路由独享守卫
        beforeEnter: (to, from, next) => {
            let fromPath = from.path
            if (fromPath.indexOf('/detail') != -1) { // 从detail组件来才能放行
                next()
            } else {
                next(false)//不跳转
            }
        }
    },
...

3.组件内路由守卫

在pay路由中，若未支付可以直接通过地址栏跳转到paysuccess，因此设置组件内路由守卫，在路由离开前调用，判断是否支付

在pages/pay中：
// 组件内路由守卫 
  beforeRouteLeave(to, from, next) {
    // 防止没支付成功直接通过地址栏进入paysuccess组件
    if (this.resultCode == 200) {
      next()
    } else {
      next(false)
    }
  }

注意：在boforeRouteEnter函数调用时，vc实例还没有创建出来，所以this指针没有指向；

        beforeRouteUpdate函数在路由路径相同携带参数不同时调用。

(三)懒加载

1.图片懒加载

什么是图片懒加载？图片懒加载是指在网页中，当用户滚动页面时才加载图片的一种技术。相对于传统的图片加载方式，懒加载可以减少初始页面的加载时间，提高网站的响应速度。 

使用插件vue-lazyload实现图片懒加载

下载插件：npm i vue-lazyload@1.3.3 -S

使用方法：vue-lazyload - npm 

在main.js中：
// 引入图片懒加载
import VueLazyload from 'vue-lazyload'
import loadimage from '@/assets/loading.gif'
Vue.use(VueLazyload, {
  loading: loadimage
})

在pages/search中：
<router-link :to="`/detail/${goods.id}`">
    <img v-lazy="goods.defaultImg" />
</router-link>

2.路由懒加载

路由懒加载 | Vue Router

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。 

component配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。

(四）结束

vue2项目终于是写完了，但是现在都开始普遍使用vue3了，要开始学vue3了！！