四 Vue学习 router学习

index.js:

按需加载组件： const login = r => require.ensure([], () => r(require('@/page/login')), 'login');
　　         把JS文件分模块，安需加载，而不是，整个都加载。

routes ：  定义路径和组件的mapping关系。
children: 子路径的定义。

meta ： 可以格外指定一些信息。

Router ：最后定义路由的实例，并且导出，供App.vue使用。

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const login = r => require.ensure([], () => r(require('@/page/login')), 'login');

const manage = r => require.ensure([], () => r(require('@/page/manage')), 'manage');

const home = r => require.ensure([], () => r(require('@/page/home')), 'home');

const addShop = r => require.ensure([], () => r(require('@/page/addShop')), 'addShop');

const addGoods = r => require.ensure([], () => r(require('@/page/addGoods')), 'addGoods');

const userList = r => require.ensure([], () => r(require('@/page/userList')), 'userList');

const shopList = r => require.ensure([], () => r(require('@/page/shopList')), 'shopList');

const foodList = r => require.ensure([], () => r(require('@/page/foodList')), 'foodList');

const orderList = r => require.ensure([], () => r(require('@/page/orderList')), 'orderList');

const adminList = r => require.ensure([], () => r(require('@/page/adminList')), 'adminList');

const visitor = r => require.ensure([], () => r(require('@/page/visitor')), 'visitor');

const newMember = r => require.ensure([], () => r(require('@/page/newMember')), 'newMember');

const uploadImg = r => require.ensure([], () => r(require('@/page/uploadImg')), 'uploadImg');

const vueEdit = r => require.ensure([], () => r(require('@/page/vueEdit')), 'vueEdit');

const adminSet = r => require.ensure([], () => r(require('@/page/adminSet')), 'adminSet');

const sendMessage = r => require.ensure([], () => r(require('@/page/sendMessage')), 'sendMessage');

const explain = r => require.ensure([], () => r(require('@/page/explain')), 'explain');

const routes = [

    {

        path: '/',

        component: login

    },

    {

        path: '/manage',

        component: manage,

        name: '',

        children: [{

            path: '',

            component: home,

            meta: [],

        },{

            path: '/addShop',

            component: addShop,

            meta: ['添加数据', '添加商铺'],

        },{

            path: '/addGoods',

            component: addGoods,

            meta: ['添加数据', '添加商品'],

        },{

            path: '/userList',

            component: userList,

            meta: ['数据管理', '用户列表'],

        },{

            path: '/shopList',

            component: shopList,

            meta: ['数据管理', '商家列表'],

        },{

            path: '/foodList',

            component: foodList,

            meta: ['数据管理', '食品列表'],

        },{

            path: '/orderList',

            component: orderList,

            meta: ['数据管理', '订单列表'],

        },{

            path: '/adminList',

            component: adminList,

            meta: ['数据管理', '管理员列表'],

        },{

            path: '/visitor',

            component: visitor,

            meta: ['图表', '用户分布'],

        },{

            path: '/newMember',

            component: newMember,

            meta: ['图表', '用户数据'],

        },{

            path: '/uploadImg',

            component: uploadImg,

            meta: ['文本编辑', 'MarkDown'],

        },{

            path: '/vueEdit',

            component: vueEdit,

            meta: ['编辑', '文本编辑'],

        },{

            path: '/adminSet',

            component: adminSet,

            meta: ['设置', '管理员设置'],

        },{

            path: '/sendMessage',

            component: sendMessage,

            meta: ['设置', '发送通知'],

        },{

            path: '/explain',

            component: explain,

            meta: ['说明', '说明'],

        }]

    }

]

export default new Router({

    routes,

    strict: process.env.NODE_ENV !== 'production',

})

巴特西

四 Vue学习 router学习

最新文章

热门文章