zoukankan      html  css  js  c++  java
  • vue-x 解决微信头部标题问题

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state: {
    
        },
        getters: {
    
        },
        mutations: {
       
        },
        actions: {
            changeTitle({commit}, title){
               document.title = title
            },
        }
    })
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Store from '../store'
    
    Vue.use(VueRouter)
    
    const routes = [{
            path: '/',
            component: (resolve) => require(['../pages/mall/mall.vue'], resolve),
            meta: {
                title: '点外卖',
            }
        },
        {
            path: '/order',
            component: (resolve) => require(['../pages/order/order.vue'], resolve),
            meta: {
                title: '订单详情',
            }
        },
        {
            path: '/orderDetail',
            component: (resolve) => require(['../pages/order/detailOrderPage.vue'], resolve),
            meta: {
                title: '订单详情',
            }
        },
        {
            path: '/orderList',
            component: (resolve) => require(['../pages/order/orderList.vue'], resolve),
            meta: {
                title: '订单列表详情',
            }
        },
        {
            path: '/addressList',
            component: (resolve) => require(['../pages/address/address-list.vue'], resolve),
            meta: {
                title: '地址详情',
            }
        },
        {
            path: '/newAddress',
            component: (resolve) => require(['../pages/address/new-address.vue'], resolve),
            meta: {
                title: '新增地址',
            }
        },
        {
            path: '/personal',
            component: (resolve) => require(['../pages/personal/personalPage.vue'], resolve),
            meta: {
                title: '个人中心',
            }
        },
        {
            path: '/binding',
            component: (resolve) => require(['../pages/binding/binding.vue'], resolve),
            meta: {
                title: '账户绑定',
            }
        },
        {
            path: '/accountManage',
            component: (resolve) => require(['../pages/binding/accountManage.vue'], resolve),
            meta: {
                title: '账户管理',
            }
        },
    ]
    
    // 路由配置
    const router = new VueRouter({
        routes
    })
    
    // router.beforeEach((to, from, next) => {
    //     next()
    // })
    //
    router.afterEach((to) => {
        Store.dispatch('changeTitle', to.meta.title)
    })
    
    export default router
  • 相关阅读:
    iphoneX适配
    是时候啃一啃http跟https了
    使用阿里巴巴矢量图标库的图标
    react使用高阶组件进行界面跳转
    js性能提升之函数的防抖和节流
    vuex的一些需要知道的点
    react项目之使用猪齿鱼框架---dataSet的基础使用
    从js下手提升代码性能
    vue+ts搭建工程
    学习笔记之TypeScript语法一
  • 原文地址:https://www.cnblogs.com/MR-cui/p/8617893.html
Copyright © 2011-2022 走看看