想优化vue-router里面的代码,怎么优化比较好?

发布于 2022-09-12 14:03:59 字数 3547 浏览 13 评论 0

import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
// import App from 'src/App';

import UserTable from 'src/views/administration/userTable';
import Admin from 'src/views/admin/admin';
import AddUser from 'src/views/userManage/addUser/addUser';
import DataTmp from 'src/views/admin/modules/dataTmp/dataTmp';
import TaskList from 'src/views/admin/modules/taskList/taskList';
import CustomContainer from 'src/views/customContainer/customContainer';
import UserList from 'src/views/userManage/userList/userList';
import PartDraggable from 'src/views/partDraggable/partDraggable';
import TenantMessage from 'src/views/tenantMessage/tenantMessage';
import Gallery from 'src/views/gallery/gallery'
import StudentList from 'src/views/student/studentList';
import StudentAdd from 'src/views/student/studentAdd';
import StudentGrid from 'src/views/student/studentGrid';

import Article from 'src/views/article/article';

import Index from 'src/views/index';
import Login from 'src/views/login/login';

import VideoSocket from 'src/views/VideoSocket';

/**
 * 要告诉 vue 使用的 vueRouter
 * 书写规范:路由中的name都要大写,path都要小写
 */
Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/manage/userTable',
        component: UserTable
    },
    {
        path: '/admin',
        name: 'Admin',
        component: Admin,
        redirect:'/index',
        children:[
            {
                path: '/index',
                component: Index
            },
            {
                path: '/user_add',
                name: 'AddUser',
                component: AddUser,
            },
            {
                path: '/task_list',
                name: 'TaskList',
                component: TaskList
            },
            {
                path: '/data_tmp',
                name: 'DataTmp',
                component: DataTmp
            },
            {
                path: '/user_list',
                name: 'UserList',
                component: UserList
            },
            {
                path: '/customContainer',
                name: 'CustomContainer',
                component: CustomContainer
            },
            {
                path: '/partDraggable',
                name: 'PartDraggable',
                component: PartDraggable
            },
            {
                path: '/article',
                name: 'Article',
                component: Article
            },
            {
                path: '/tenant_message',
                name: 'TenantMessage',
                component: TenantMessage
            },
            {
                path: '/gallery',
                name: 'Gallery',
                component: Gallery
            },
            {
                path: '/studentList',
                name: 'StudentList',
                component: StudentList
            },
            {
                path: '/studentAdd',
                name: 'StudentAdd',
                component: StudentAdd
            },
            {
                path: '/studentGrid',
                name: 'StudentGrid',
                component: StudentGrid
            }
        ]
    },
    {
        path: '/videoSocket',
        name: 'VideoSocket',
        component: VideoSocket,
    }
];

let router =  new VueRouter({
    routes,
    // mode: 'history',
    mode: 'hash',
    linkActiveClass:'mui-active'
});

export default router;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我家小可爱 2022-09-19 14:03:59

可以使用路由懒加载

{
    path: '/login',
    component: ()=>import 'src/views/login/login'
},
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文