vue3根目录挂在问题?

好像记得以前vue2的时候index.html下的<div id="app"></div>会被替换,现在vue3如果App.vue如果写成这样,会直接挂在到<div id="app"><div id="app">...</div></div>里面,能不能直接替换

<template>
    <div id="app">
        <RouterView/>
    </div>
</template>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

另外一个问题:

<template>
    <Teleport to="body">
        <h1>挂载 Teleport</h1>
    </Teleport>
</template>

有没有办法把上面这个挂在到 <div id="app"></div> 前面,现在都是在body最后面,我想移到body最前面,如果在<div id="app"></div> 前面加一个<div id="teleported"></div>里面,那又会挂载到<div id="teleported"></div>里面,我就想挂在到<div id="app"></div> 前面,直接就是<h1>挂载 Teleport</h1><div id="app"></div>有没有办法?

阅读 1.4k
2 个回答

应该没有。而且不知道你的目的是什么,前后差一点没什么关系吧。

第一个挂载问题,即使在 app 里面写 <div id="app">,它也是通过 JavaScript 执行之后才会被添加到页面上的,而在真正 mount 的时候获取的是 index.html 中已存在的 <div id="app">,这两个看起来一样但根本不是同一个东西。另外,id 本身就是需要保证唯一性,上面的做法不是理解。

第二个问题,<Teleport to="body"> 本身就是在元素的末尾曲插入节点,因此,如果你想在 <body> 之前插入节点也简单,换个思路,你在 <body> 中提供一个 <div id="inser-before"> 作为专门接收 <Teleport> 内容的容器就好了,这个容器作为 <body> 的第一个节点即可,使用时 <Teleport to="#inser-before">

本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题