路径配置的一些点

在 router/index里通过配置创建路由，将创建的VueRouter.Router实例导出用于整个项目。

1. 对下面这个最基础的配置，它拥有两个路由记录，但不要忘记，还有一个根路由地址，此时是可以访问3个路由地址的。可以访问/#/,/#/a,/#/b。

const routes: RouteRecordRaw[] = [
  {
    path: "/a",
    component: PageA
  },
  {
    path: '/b',
    component: PageB
  }
];

2. 在路由配置的过程中，经常会遇到以模块划分的父子路由，两层甚至三层嵌套。这些嵌套的路由在写路由配置时要注意：对于父路由来说，当配置其children时，子路由的path是不能再按照path: '/b'这种形式，这样会生成从根开始的路由/#/b，并且会把下面原本配好的/b路由顶替掉。

const routes: RouteRecordRaw[] = [
  {
    path: "/a",
    component: PageA,
    children: [
      {
        path: 'b',
        component: PageC
      }
    ]
  },
  {
    path: '/b',
    component: PageB
  },
];

正确的写法就是如图中所示，这样就会将父级路由和子级路由合并成完整的新路由/a/b。

3. App.vue就对应着路由中的根路径/#/，那在App.vue里添加的元素最终就是所有的页面都会有，从这一点反推，要网站最后跳转、显示正常，那在router/index.ts里进行配置时：

• 要么配置路径/ redirect到别的一个路径，比如常见的/home
• 要么App.vue里就除了router-view之外什么也没有，App.vue只做一个最大的根容器用。

4. 配置复杂之后，一进应用，路由就对应到/，然后根据配置又重定向到/home，而此时/home配置的component为LayoutDefault，那此时界面只是看到了应用的大框架，并没有真的转入某个有效页。可以直接在/的配置处就重定向到/home/index。仍要注意此时/home还是可以单独访问进去的，所以/home也要重定向到/home/index

5. 在写左边菜单组件时，通过递归路由配置，创建对应的sub-menu还是menu-item。

递归路由从而生成组件时，单纯看代码是有很多未处理到的边界的，这些边界通过提供的meta避免过去。并且自定义组件通过name属性完成注册后，可以自己调用自己。

一般写递归用tsx语法写起来更舒服。通过@vitejs/plugin-vue-jsx插件就可以时别jsx语法。