用quasar+vue3+组合式api VueRouter实现路由嵌套（二级路由）

前言：

本项目使用的是quasar创建，vue3的组合式api语法。部分语法不同，但不影响理解，修改语法后可以在vue2/选项式api项目中运行。

效果图：

文件目录结构和代码如下：

  文中用到的标题栏数据如下：

const titles = ref([
  { name: "首页", path: "home", children: [] },
  {
    name: "天气", path: "weather", children: [
      { name: "上海", path: "shanghai" },
      { name: "江苏", path: "jiangsu" },
      { name: "浙江", path: "zhejiang" },
    ]
  },
  {
    name: "新闻", path: "news", children: [
      { name: "科技", path: "technology" },
      { name: "植物", path: "plant" },
    ]
  },
])

   路由表如下（注意children里的path都没有 / ）：

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/",
    component: () => import("layouts/MainLayout.vue"),
    children: [
      { path: "css", component: () => import("pages/xiaomiTitltBarCss.vue") },
      {
        path: "cssjs",
        component: () => import("pages/xiaomiTitltBarCssJs.vue"),
      },
      // /////////////////////// 测试嵌套路由 

标签：vue,name,quasar,api,menu,router,path,路由	

From： https://www.cnblogs.com/sunshine233/p/17314164.html