vue项目中rounter路由index配置

最新推荐文章于 2024-04-02 18:46:41 发布

weixin_40314969

最新推荐文章于 2024-04-02 18:46:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40314969/article/details/81450011

本文介绍了如何在Vue项目中配置router，包括导入Vue和Vue-router，动态加载组件，设置路由守卫以及定义各个路由组件，如管理事项、消息模板、统计分析等。

import Vue from 'vue'

import Router from 'vue-router'

import store from '@/store'

const sideBar = r => require.ensure([], () => r(require('@/components/sideBar/sideBar.vue')), 'sideBar');

const logout = r => require.ensure([], () => r(require('@/components/logout/logout.vue')), 'logout');

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

const managementMatters = r => require.ensure([], () => r(require('@/views/managementMatters/managementMatters.vue')), 'managementMatters');

const messageTemplateMatters = r => require.ensure([], () => r(require('@/views/messageTemplateMatters/messageTemplateMatters.vue')), 'messageTemplateMatters');

const statisticalAnalysis = r => require.ensure([], () => r(require('@/views/statisticalAnalysis/statisticalAnalysis.vue')), 'statisticalAnalysis');

const windowTypeMatters = r => require.ensure([], () => r(require('@/views/windowMatters/windowTypeMatters.vue')), 'windowTypeMatters');

const windowList = r => require.ensure([], () => r(require('@/views/windowMatters/windowList.vue')), 'windowList');

const worktimeSet = r => require.ensure([], () => r(require('@/views/worktimeSet/worktimeSet.vue')), 'worktimeSet');

const predictTypeSet = r => require.ensure([], () => r(require('@/views/appointmentMatters/predictTypeSet.vue')), 'predictTypeSet');

const predictAuditing = r => require.ensure([], () => r(require('@/views/appointmentMatters/predictAuditing.vue')), 'predictAuditing');

Vue.use(Router);

const routers = [

{

path: '',

component:sideBar,

/*redirect:'/managementMatters',*/

children: [

{

path: '/logout',

component: logout

{

path: '/managementMatters',

component:managementMatters,

{

path: '/messageTemplateMatters',

component:messageTemplateMatters,

{

path: '/statisticalAnalysis',

component:statisticalAnalysis,

{

path: '/windowTypeMatters',

component:windowTypeMatters,

{

path: '/windowList',

component:windowList,

{

path: '/worktimeSet',

component:worktimeSet,

{

path: '/predictTypeSet',

component:predictTypeSet,

{

path: '/predictAuditing',

component:predictAuditing,

]

/*{

path: '/login',

component: login

},*/

];

const router = new Router({

// mode: 'history',

scrollBehavior:()=>({y:0}),

routes: routers

});

// 路由跳转之前

router.beforeEach((to, from, next) => {

next()

// 显示loading过渡效果

/*store.dispatch("ChangeLoading", true);

next();*/

});

// 路由跳转之后

router.afterEach(function (to) {

// 关闭loading过渡效果

/*store.dispatch("ChangeLoading", false);*/

});

export default router;