index.js 菜单路由

文章详细描述了如何使用Vue.js和VueRouter进行前端路由配置,包括基本路径设置、命名路由、动态导入组件以及添加权限控制。展示了多个页面的路由结构和懒加载功能。
摘要由CSDN通过智能技术生成
import Vue from 'vue'
import VueRouter from 'vue-router'
import Element from 'element-ui'
import './element-variables.scss'
import 'element-ui/lib/theme-chalk/display.css';
//import login from 'login'
//import login from "../views/login/index.vue"
Vue.use(VueRouter)
const routes = [{
        path: '/',
        name: 'login',
        meta: { isLogin: true }, // 添加该字段,表示进入这个路由是需要登录的
        component: () =>
            import ('@/views/login/login.vue')
    },
    {
        path: '/Mavigation',
        name: 'Mavigation',
        component: () =>
            import ('@/views/Mavigation.vue'),
        children: [{ //路由其他页面,
                path: '/Navigation',
                name: 'Navigation',
                component: () =>
                    import ('@/views/Navigation.vue')
            },
            {
                path: '/ct',
                name: 'ct',
                component: () =>
                    import ('@/views/ct.vue')
            },
            {
                path: '/recharge',
                name: 'recharge',
                component: () =>
                    import ('@/views/recharge.vue')
            },
            {
                path: '/page',
                name: 'page',
                component: () =>
                    import ('@/views/page.vue')
            },
            {
                path: '/long',
                name: 'long',
                component: () =>
                    import ('@/views/long.vue')
            },
            {
                path: '/home',
                name: 'home',
                component: () =>
                    import ('@/views/Home.vue'),
            },
            {
                path: '/register',
                name: 'register',
                component: () =>
                    import ('@/views/register.vue'),
            },
            {
                path: '/rule',
                name: 'rule',
                component: () =>
                    import ('@/views/rule.vue'),
            },
            {
                path: '/UserPermissions',
                name: 'UserPermissions',
                component: () =>
                    import ('@/views/UserPermissions.vue'),
            },
            {
                path: '/Calendar',
                name: 'Calendar',
                component: () =>
                    import ('@/views/Calendar.vue'),
            },
            {
                path: '/CalendarCustom',
                name: 'CalendarCustom',
                component: () =>
                    import ('@/views/CalendarCustom.vue'),
            },
            {
                path: '/CalendarRange',
                name: 'CalendarRange',
                component: () =>
                    import ('@/views/CalendarRange.vue'),
            },
            {
                path: '/loading',
                name: 'loading',
                component: () =>
                    import ('@/views/loading.vue'),
            },
            {
                path: '/Progress',
                name: 'Progress',
                component: () =>
                    import ('@/views/Progress.vue'),
            },
            {
                path: '/ReportData',
                name: 'ReportData',
                component: () =>
                    import ('@/views/ReportData.vue'),
            },
            {
                path: '/Calendar',
                name: 'Calendar',
                component: () =>
                    import ('@/views/Calendar.vue'),
            },
            {
                path: '/layout',
                name: 'layout',
                component: () =>
                    import ('@/views/layout.vue'),
            },
            {
                path: '/HomePage',
                name: 'HomePage',
                component: () =>
                    import ('@/views/HomePage.vue'),
            },
            {
                path: '/phone',
                name: 'phone',
                component: () =>
                    import ('@/views/phone.vue'),
            },
            {
                path: '/Door',
                name: 'Door',
                component: () =>
                    import ('@/views/Door.vue'),
            },
            {
                path: '/MavigationArt',
                name: 'MavigationArt',
                component: () =>
                    import ('@/views/MavigationArt.vue'),
            },
            {
                path: '/SingleFileComponent',
                name: 'SingleFileComponent',
                component: () =>
                    import ('@/views/SingleFileComponent.vue'),
            },
            {
                path: '/IconName',
                name: 'IconName',
                component: () =>
                    import ('@/views/IconName.vue'),
            },
            {
                path: '/pagemix',
                name: 'pagemix',
                component: () =>
                    import ('@/views/pagemix.vue'),
            },
            {
                path: '/minlongin',
                name: 'minlongin',
                component: () =>
                    import ('@/views/minlongin.vue'),
            },
            {
                path: '/organization',
                name: 'organization',
                component: () =>
                    import ('@/views/organization.vue'),
            },
        ]
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router
// ————————————————

// const routes = [{
//     path: '/', // 一级路由全称/home
//     name: 'home', // 只有一级路由以/开头
//     component: () =>
//         import ('@/views/Home.vue'), // 按需加载路由
//     children: [{
//         // 二级路由全称 /home/news
//         path: "news", // 二级路由不能再以/ 开头
//         component: () =>
//             import ("@/views/news")
//     }]
// }, {
//     path: "/",
//     redirect: "/home" // 路由重定向值为path的名称并非组件名称
// }]

// const router = new VueRouter({
//     mode: 'history',
//     base: process.env.BASE_URL,
//     routes
// })

// export default router



// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'

// Vue.use(VueRouter)

// const routes = [
//   {
//     path: '/',
//     name: 'home',
//     component: HomeView
//   },
//   {
//     path: '/about',
//     name: 'about',
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.
//     component: function () {
//       return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
//     }
//   }
// ]

// const router = new VueRouter({
//   mode: 'history',
//   base: process.env.BASE_URL,
//   routes
// })
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值