内置组件

simple-router-view

该组件在创建路由实例时自动注册。它的作用是将匹配到的非顶级路由组件内容渲染到指定的位置，实现动态路由组件的展示。

props

Readonly<LooseRequired<Readonly<ExtractPropTypes<{
      name: {
          default: string;
          type: StringConstructor;
      };
      defClass:{
          default:string;
          type:StringConstructor;
      };
      defStyle:{
          default:string;
          type:[StringConstructor,ObjectConstructor],
      }
  }>> & {}>>

详细
- name：需要挂载的视图名称，默认情况下为 default。
- defClass：小程序端支持。该参数允许你为后代组件传递指定样式 class ，因为在小程序下无法使用attrs 进行传递，对此我们提供了该参数用于 class 穿透。
- defStyle：小程序端支持。该参数允许你为后代组件传递指定的行内样式，因为在小程序下无法使用attrs 进行传递，对此我们提供了该参数用于 style 穿透。

示例

// router.ts
import {
    createRouter,
    __dynamicImportComponent__,
    type platformRule,
} from '@/uni-simple-router'

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM as platformRule,
    routes:[
      {
          path: `/my`,
          component: __dynamicImportComponent__(`@/pages/my.vue`, {
              pageType: `top`
          }),
          children: [
              {
                  path: `profile`,
                  name: `profile`,
                  component: __dynamicImportComponent__(`@/components/profile.vue`),
              },
              {
                  path: `setting/:id`,
                  name: `setting`,
                  component: __dynamicImportComponent__(`@/components/setting.vue`)
              },
              {
                  path: `ls`,
                  components: {
                      default: __dynamicImportComponent__(`@/components/view/home.vue`),
                      LeftSidebar: __dynamicImportComponent__(`@/components/view/LeftSidebar.vue`),
                      RightSidebar: __dynamicImportComponent__(`@/components/view/RightSidebar.vue`)
                  }
              },
          ]
      },
    ]
})

html

<!-- my.vue -->
  <template>
    <view class="content">
        <h1>my page</h1>
        <div class="realCont border">
            <!-- 渲染 profile.vue/setting.vue/home.vue -->
            <simple-router-view />
            <!-- 渲染 LeftSidebar.vue  -->
            <simple-router-view  name="LeftSidebar"/>
            <!-- 渲染 RightSidebar.vue -->
            <simple-router-view name="RightSidebar"/>
        </div>
    </view>
</template>

参考指南 - 命名视图

内置组件 ​

simple-router-view ​

内置组件

simple-router-view