house/fount/router/router-static.js

import Vue from 'vue'; // 引入 Vue 核心库
// 配置路由
import VueRouter from 'vue-router'; // 引入 Vue Router 库
Vue.use(VueRouter); // 使用 Vue Router 插件

// 1. 创建组件
import Index from '@/views/index'; // 导入首页组件
import Home from '@/views/home'; // 导入主页组件
import Login from '@/views/login'; // 导入登录页组件
import NotFound from '@/views/404'; // 导入 404 页面组件
import UpdatePassword from '@/views/update-password'; // 导入修改密码页面组件
import pay from '@/views/pay'; // 导入支付页面组件
import register from '@/views/register'; // 导入注册页面组件
import center from '@/views/center'; // 导入个人信息页面组件
import fangwuleixing from '@/views/modules/fangwuleixing/list'; // 导入房屋类型列表页面组件
import discussfangwuxinxi from '@/views/modules/discussfangwuxinxi/list'; // 导入房屋信息评论列表页面组件
import news from '@/views/modules/news/list'; // 导入公告信息列表页面组件
import weixiuchuli from '@/views/modules/weixiuchuli/list'; // 导入维修处理列表页面组件
import storeup from '@/views/modules/storeup/list'; // 导入我的收藏管理列表页面组件
import fangwupingjia from '@/views/modules/fangwupingjia/list'; // 导入房屋评价列表页面组件
import fangwuxinxi from '@/views/modules/fangwuxinxi/list'; // 导入房屋信息列表页面组件
import yuyuekanfang from '@/views/modules/yuyuekanfang/list'; // 导入预约看房列表页面组件
import woyaodangfangzhu from '@/views/modules/woyaodangfangzhu/list'; // 导入我要当房主列表页面组件
import fangzhu from '@/views/modules/fangzhu/list'; // 导入房主列表页面组件
import yonghu from '@/views/modules/yonghu/list'; // 导入用户列表页面组件
import discusswoyaodangfangzhu from '@/views/modules/discusswoyaodangfangzhu/list'; // 导入我要当房主评论列表页面组件
import fangwubaoxiu from '@/views/modules/fangwubaoxiu/list'; // 导入房屋报修列表页面组件
import hetongxinxi from '@/views/modules/hetongxinxi/list'; // 导入合同信息列表页面组件
import messages from '@/views/modules/messages/list'; // 导入留言板管理列表页面组件
import config from '@/views/modules/config/list'; // 导入轮播图管理列表页面组件

// 2. 配置路由 注意：名字
const routes = [ // 定义路由规则数组
  {
    path: '/index', // 路由路径
    name: '首页', // 路由名称
    component: Index, // 对应的组件
    children: [ // 子路由
      {
        path: '/', // 默认子路径
        name: '首页', // 子路由名称
        component: Home, // 对应的子组件
        meta: { icon: '', title: 'center' } // 元信息，包含图标和标题
      },
      {
        path: '/updatePassword', // 修改密码页面路径
        name: '修改密码', // 路由名称
        component: UpdatePassword, // 对应的组件
        meta: { icon: '', title: 'updatePassword' } // 元信息
      },
      {
        path: '/pay', // 支付页面路径
        name: '支付', // 路由名称
        component: pay, // 对应的组件
        meta: { icon: '', title: 'pay' } // 元信息
      },
      {
        path: '/center', // 个人信息页面路径
        name: '个人信息', // 路由名称
        component: center, // 对应的组件
        meta: { icon: '', title: 'center' } // 元信息
      },
      {
        path: '/fangwuleixing', // 房屋类型页面路径
        name: '房屋类型', // 路由名称
        component: fangwuleixing // 对应的组件
      },
      {
        path: '/discussfangwuxinxi', // 房屋信息评论页面路径
        name: '房屋信息评论', // 路由名称
        component: discussfangwuxinxi // 对应的组件
      },
      {
        path: '/news', // 公告信息页面路径
        name: '公告信息', // 路由名称
        component: news // 对应的组件
      },
      {
        path: '/weixiuchuli', // 维修处理页面路径
        name: '维修处理', // 路由名称
        component: weixiuchuli // 对应的组件
      },
      {
        path: '/storeup', // 我的收藏管理页面路径
        name: '我的收藏管理', // 路由名称
        component: storeup // 对应的组件
      },
      {
        path: '/fangwupingjia', // 房屋评价页面路径
        name: '房屋评价', // 路由名称
        component: fangwupingjia // 对应的组件
      },
      {
        path: '/fangwuxinxi', // 房屋信息页面路径
        name: '房屋信息', // 路由名称
        component: fangwuxinxi // 对应的组件
      },
      {
        path: '/yuyuekanfang', // 预约看房页面路径
        name: '预约看房', // 路由名称
        component: yuyuekanfang // 对应的组件
      },
      {
        path: '/woyaodangfangzhu', // 我要当房主页面路径
        name: '我要当房主', // 路由名称
        component: woyaodangfangzhu // 对应的组件
      },
      {
        path: '/fangzhu', // 房主页面路径
        name: '房主', // 路由名称
        component: fangzhu // 对应的组件
      },
      {
        path: '/yonghu', // 用户页面路径
        name: '用户', // 路由名称
        component: yonghu // 对应的组件
      },
      {
        path: '/discusswoyaodangfangzhu', // 我要当房主评论页面路径
        name: '我要当房主评论', // 路由名称
        component: discusswoyaodangfangzhu // 对应的组件
      },
      {
        path: '/fangwubaoxiu', // 房屋报修页面路径
        name: '房屋报修', // 路由名称
        component: fangwubaoxiu // 对应的组件
      },
      {
        path: '/hetongxinxi', // 合同信息页面路径
        name: '合同信息', // 路由名称
        component: hetongxinxi // 对应的组件
      },
      {
        path: '/messages', // 留言板管理页面路径
        name: '留言板管理', // 路由名称
        component: messages // 对应的组件
      },
      {
        path: '/config', // 轮播图管理页面路径
        name: '轮播图管理', // 路由名称
        component: config // 对应的组件
      }
    ]
  },
  {
    path: '/login', // 登录页面路径
    name: 'login', // 路由名称
    component: Login, // 对应的组件
    meta: { icon: '', title: 'login' } // 元信息
  },
  {
    path: '/register', // 注册页面路径
    name: 'register', // 路由名称
    component: register, // 对应的组件
    meta: { icon: '', title: 'register' } // 元信息
  },
  {
    path: '/', // 默认跳转路径
    name: '首页', // 路由名称
    redirect: '/index' // 重定向到 /index
  }, /* 默认跳转路由 */
  {
    path: '*', // 匹配所有未定义的路径
    component: NotFound // 对应的组件为 404 页面
  }
];

// 3. 实例化 VueRouter 注意：名字
const router = new VueRouter({ // 创建 VueRouter 实例
  mode: 'hash', // 使用 hash 模式
  /* hash模式改为history */
  routes // 将路由规则传递给 VueRouter
});

export default router; // 导出路由实例