Vue3后台管理点击导航页面空白无内容

今天在制作一个景区后台管理系统时,下载了一个模板使用。

在切换页面时出现了问题,页面切换了,但是页面呈现出一片空白,写好的东西都没有了。

当时以为是哪里写错了,就开始找,但是找了一圈后发现没有问题,又以为是模板的问题。后来发现了问题所在。

下面是我的代码:

虽然vue3支持多节点,但最好还是将最外层包裹一个div,不然会出现页面不加载的问题。

发现问题后我进行了更改:

图片内容只是为了方便大家理解才这样写的,原内容有很多,只是为了方便我进行了删减,但最终所以内容都要包在一个div内。

 更改过后就好了,你的页面内容要统一包裹在一个div里面,要不然就会导致出现问题。

如果想要探索其中的缘由可以进行搜索,这也问题的话也算是一个小坑吧,我可是记住了,各位也要知道这个坑哦

今天的分享就到这里了,感谢大家的阅读,这也是大家对我的一种肯定。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
根据提供的引用内容Vue3后台管理系统页面通常具有以下特点: 1. 使用了element-plus组件库进行页面渲染,使页面更加美观。 2. 使用了路由(route)实现不同页面之间的逻辑跳转。 3. 页面具有登录状态,根据登录状态来显示不同的内容。 4. 在打开网页时,会先判断用户是否已登录,如果已登录,则直接显示主页;否则,强制跳转至登录页。 5. 在退出登录后,会更改状态为不保持登录状态,并使用localStorage来存储相关信息。 下面是一个简单的Vue3后台管理系统页面的示例代码: ```vue <template> <div> <router-link to="/home">Home</router-link> <router-link to="/login">Login</router-link> <router-link to="/dashboard">Dashboard</router-link> <router-view></router-view> </div> </template> <script> import { ref } from 'vue';import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); const isLoggedIn = ref(false); // 判断是否已登录 if (localStorage.getItem('isLoggedIn') === 'true') { isLoggedIn.value = true; } // 退出登录 const logout = () => { isLoggedIn.value = false; localStorage.setItem('isLoggedIn', 'false'); router.push('/login'); }; return { isLoggedIn, logout }; } }; </script> ``` 在上述示例中,我们使用了Vue3的组合式API来实现页面的逻辑。通过`router-link`组件来实现页面之间的跳转,使用`router-view`组件来渲染对应的页面内容。通过`localStorage`来存储登录状态,并在退出登录时更新状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萝卜头不吃萝卜头

您的鼓励将是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值