问答

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

作者:admin 2021-05-07 我要评论

import Vue from "vue";import VueRouter from "vue-router";// 引入组件// import App from 'src/App';import UserTable from 'src/views/administration/userT...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
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;
###

可以使用路由懒加载

{
    path: '/login',
    component: ()=>import 'src/views/login/login'
},

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 想优化vue-router里面的代码,怎么优化

    想优化vue-router里面的代码,怎么优化

  • 想优化el-menu中的代码,请问怎么优化?

    想优化el-menu中的代码,请问怎么优化?

  • php mysql 时间计算问题

    php mysql 时间计算问题

  • php或linux如何更高效率地筛选20万张图

    php或linux如何更高效率地筛选20万张图

腾讯云代理商
海外云服务器