The vue3-tsx from plum-k

vue3-tsx's People

Contributors

Stargazers

Watchers

vue3-tsx's Issues

关于子路由下的router-view的问题

需求是：
页面共有一个顶部导航，所以实现了一个layout的组建

// layout.jsx
import { defineComponent } from "vue";
import AppMain from "./AppMain";
import Navbar from "./Navbar";

export default defineComponent({
  name: 'Layout',
  setup(props, ctx) {
    return () => (
      <div>
        <Navbar />
        <AppMain />
      </div>
    )
  }
})

路由设置为

import { createRouter, createWebHashHistory } from "vue-router";
import Layout from "../layout";

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Home',
        component: () => import('../views/home')
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
})

router.beforeEach((to, from) => {
  // 返回 false 则取消导航
  if(to.path === '/login') {
    // 登录页面不做限制
    return true
  } else {
    // 判断缓存中是否有 token 如果没有 则跳转到登录页面
    if(localStorage.getItem('token')) {
      return true
    } else {
      router.push('/login')
      return false
    }
  }
})

export default router

关键问题是这里的AppMain中的router-view用jsx怎么写，渲染有问题

import { defineComponent, KeepAlive, Transition } from "vue";
import { RouterView } from "vue-router";

export default defineComponent({
  name: 'AppMain',
  setup(props, ctx) {
    return () => (
      <div class="app-main">
        <p>down is router view</p>
        <RouterView>
          {
            ({Component}) => (
              <KeepAlive>
                <Component />
              </KeepAlive>
            )
          }
        </RouterView>
      </div>
    )
  }
})

router-view中的内容渲染不出来

[Vue warn]: Invalid vnode type when creating vnode: undefined. 
  at <RouterView> 
  at <AppMain> 
  at <Layout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Recommend Projects