vue路由模块配置

1、router文件夹目录结构

2、在src下准备以下页面

3、pages.js文件夹下定义主要相关的一些路由

import EmptyLayout from '@/views/Layouts/empty.vue'
const pages={
  path:"/",
  component: EmptyLayout,
  redirect:"/home",
  children:[
    {
      path:"home",
      component: () => import('@/views/pages/home')
    },
    {
      path:"form",
      component: () => import('@/views/pages/form')
    },
    {
      path:"table",
      component: () => import('@/views/pages/table')
    },
    {
      path: 'login',
      component: () =>
        import ('@/views/login/index'),
      hidden: true
    },
    {
      path: '/nav',
      component: () =>
        import ('@/views/nav/index'),
      hidden: true
    },
  ]

}
export default pages

4、在error.js中定义一些错误的页面如下：

import EmptyLayout from '@/views/Layouts/empty.vue'
const errorRouter={
  path:"/error",
  component: EmptyLayout,
  redirect:"noRedirect",
  children:[
    {
      path:"401",
      component: () => import('@/views/errors/401')
    },
    {
      path:"404",
      component: () => import('@/views/errors/404')
    },

  ]

}
export default errorRouter

5、在router文件夹下的index.js中

import Vue from 'vue'
import Router from 'vue-router'
import pages from './modules/pages'
import errorRouter from './modules/error'
Vue.use(Router)
export const constantRoutes = [
  pages,
  errorRouter
];

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

const router = createRouter();

export default router;

6、在main.js中
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})

7、重点一定要准备一个像EmptyLayout这样的文件，否则路由显示不出来

<template>
  <div class="app-wrapper">
    <router-view/>
  </div>
</template>
<script>
  export default {
    name: 'EmptyLayout'
  };
</script>
<style >
  .app-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
  
  }

</style>