首页 > 编程学习 > 关于vue的Layout跳转

关于vue的Layout跳转

发布时间:2022/10/1 8:58:59
  1. 理解下

App.vue->>

<template>

  <NConfigProvider

    v-if="!isLock"

    :locale="zhCN"

    :theme="getDarkTheme"

    :theme-overrides="getThemeOverrides"

    :date-locale="dateZhCN"

  >

    <AppProvider>

      <RouterView />

    </AppProvider>

  </NConfigProvider>

  <transition v-if="isLock && $route.name !== 'login'" name="slide-up">

    <LockScreen />

  </transition>

</template>

/---/dashboard ,appvue.vue中的RouterView replace(“/”),而通过下面的,直接跳转到/dashboard,而/dashboard是有Component(Layout),而Layout中有router-view,里面的router-view,则跳转到/dashboard/console中

export const RootRoute: RouteRecordRaw = {

  path: '/',

  name: 'Root',

  redirect: “/dashboard”,(这个没有Componenet)

  meta: {

    title: 'Root',

  },

};

 这个是/dashboard对应的组件是Layout,而Layout中又有一个router-view,这里面的router-view重定向到/dashboard/console

const routes: Array<RouteRecordRaw> = [

  {

    path: '/dashboard',

    name: routeName,

    redirect: '/dashboard/console',

    component: Layout,

    meta: {

      title: 'Dashboard',

      icon: renderIcon(DashboardOutlined),

      permissions: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],

      sort: 0,

},

const routes: Array<RouteRecordRaw> = [

  {

    path: '/dashboard',

    name: routeName,

    redirect: '/dashboard/console',

    component: Layout,

    meta: {

      title: 'Dashboard',

      icon: renderIcon(DashboardOutlined),

      permissions: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],

      sort: 0,

    },

    children: [

      {

        path: 'console',

        name: `${routeName}_console`,

        meta: {

          title: '主控台',

          permissions: ['dashboard_console'],

          affix: true,

        },

        component: () => import('@/views/dashboard/console/console.vue'),

      },

      {

        path: 'workplace',

        name: `${routeName}_workplace`,

        meta: {

          title: '工作台',

          keepAlive: true,

          permissions: ['dashboard_workplace'],

        },

        component: () => import('@/views/dashboard/workplace/workplace.vue'),

      },

    ],

  },

];

Layout的某一部分

<template>

  <RouterView>

    <template #default="{ Component, route }">

      <transition :name="getTransitionName" mode="out-in" appear>

        <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">

          <component :is="Component" :key="route.fullPath" />

        </keep-alive>

        <component v-else :is="Component" :key="route.fullPath" />

      </transition>

    </template>

  </RouterView>

</template>

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号