请教个问题

[dybxin]

关于src/layout/components/Sidebar/Item.vue 您这边是把它替换成 item.ts，如果只是修改item.vue文件，会提示如下错误

Item.vue?837c:16 Uncaught (in promise) TypeError: Cannot read property 'icon' of undefined
    at Proxy.render (Item.vue?837c:16)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1166)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5201)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5154)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5113)
    at processComponent (runtime-core.esm-bundler.js?5c40:5071)
    at patch (runtime-core.esm-bundler.js?5c40:4673)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4861)

[cereschen]

https://github.com/PanJiaChen/vue-admin-template/blob/714ded1155a5d9b04bc9710b22fe71f9ee7143c2/src/layout/components/Sidebar/Item.vue#L28

看一下这行 当时修改这个文件是因为slot的问题 slot='title' 已经不再起作用 子组件中不能写父组件的slot

[dybxin]

@cereschen 谢谢

另外还有一个关于RouterViewWrapper的疑问，我在改写vue-admin-template时，遇到在点击Breadcrumb时有如下问题，

Uncaught TypeError: path_to_regexp__WEBPACK_IMPORTED_MODULE_7___default.a.compile is not a function

我的router:

import { createRouter, createWebHistory } from 'vue-router'

/* Layout */
import Layout from '@/layout'

const routes = [
  {
		path: '/order',
		component: Layout,
		redirect: '/order/index',
		children: [
			{
        path: 'index',
        component: () => import('@/views/order/index'),
        name: 'Order',
        meta: { title: 'Order', icon: 'component' }
			}
		]
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard.vue'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  {
    path: '/login',
    name: 'Login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/login/index.vue')
  },
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Breadcrumb -> index.vue

<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'


export default {
  setup() {
    const levelList= ref([])
    const route = useRoute()
    const router = useRouter()

    function isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    }

    function getBreadcrumb() {
      // only show routes with meta.title
      let matched = route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!isDashboard(first)) {
        matched = [({ path: '/dashboard', meta: { title: 'Dashboard' } })].concat(matched)
      }
      levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    }
    getBreadcrumb()
    watch(() => route.path, () => {
      // if you go to the redirect page, do not update the breadcrumbs
      console.log('---', route.path.startsWith('/redirect/'))
      if (route.path.startsWith('/redirect/')) {
        return
      }
      getBreadcrumb()
    })

    function pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    }
    function handleLink(item) {
      const { redirect, path } = item

      if (redirect) {
        router.push(redirect.toString())
        return
      }
      router.push(pathCompile(path))
    }

    return { levelList, handleLink }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>

redirect -> index.vue

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>