# vue3-vue-vlog

**Repository Path**: darcrandex/vue3-vue-vlog

## Basic Information

- **Project Name**: vue3-vue-vlog
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-03
- **Last Updated**: 2021-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE Vlog

> 使用 vue 写一个 vue (禁止套娃)

## 坑

1. 关于`jsx`模式的路由缓存. 具体看[这个链接](https://juejin.cn/post/6969356409573998628/)

2. 元素的`style`属性值需要带上单位.

```jsx
// 不ok
<div style={{ height: 10 }}></div>

// ok
<div style={{ height: `${10}px` }}></div>
```

3. 类属性

在`vue-jsx`中, 类名属性使用的是`class`, 不是`className`.

4. 嵌套路由报错
   > [Invalid vnode type](https://github.com/vuejs/vue-next/issues/1997)

如果是嵌套的路由,如果父组件被卸载, 这里的`Component`会是`undefined`,导致警告. 给`Component`配置一个默认值来避免这个警告.

```tsx
<RouterView
  v-slots={{
    // 配置默认值
    default: ({ Component = () => <div></div> }: { Component: any; route: RouteRecordRaw }) => {
      return (
        <KeepAlive include={['Home', 'Mine']}>
          <Component />
        </KeepAlive>
      )
    },
  }}
/>
```