vue路由模块配置

最新推荐文章于 2023-01-06 10:09:15 发布

waterTina

最新推荐文章于 2023-01-06 10:09:15 发布

阅读量446

点赞数

分类专栏： vue相关

本文链接：https://blog.csdn.net/waterTina/article/details/104424414

版权

本文介绍了Vue项目的路由配置过程，包括router文件夹的目录结构、src下页面的创建、pages.js中路由定义、error.js中错误页面设定、index.js与main.js中的关键导入和配置，特别是强调了EmptyLayout组件对于正确显示路由的重要性。

摘要由CSDN通过智能技术生成

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',
      co