我创建了一个vuejs3单页应用程序"没有"路由器和路由，也没有"网址"的变化（想总是显示在地址栏中的家），但需要帮助，以正确的方式做。
"我想要"
1.有一个主要的html页面上的页面有链接，按钮等，在运行时页面归档（如何？？？）
1.在起始页上填写第一个主页
1.单击每个链接或按钮时，将在页面中替换所选组件
index.html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>main.jsimport { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import './style.css'
const app = createApp(App)
app.use(store)
app.mount('#app')应用程序. vue文件
<template>
<div>
<h1>Hello world</h1>
<button type="button" @click="changeView(0)"> Home 1 </button>
<button type="button" @click="changeView(1)"> Home 2 </button>
<button type="button" @click="changeView(2)"> Home 3 </button>
</div>
<Suspense v-if="isLoggedIn">
<template #default>
<changeViews />
</template>
<template #fallback>
<p>loading...</p>
</template>
</Suspense>
<changeViews v-if="showIt" />
</template>
<script setup>
import { defineAsyncComponent, ref, markRaw } from 'vue'
const menus = [
{
name: "home"
,url: "home"
},
{
name: "about"
,url: "about"
},
{
name: "contact"
,url: "contact"
},
]
let showIt = ref(false)
let changeViews = ref(null)
changeViews.value = markRaw(defineAsyncComponent((loc) =>
import(`./components/${menus[0].url}/index.vue`)
))
function changeView(ja){
showIt.value = false
if(ja===1) {
showIt.value = true
changeViews.value = defineAsyncComponent((loc) =>
import(`./components/${menus[ja].url}/index.vue`)
)
}
}
</script>页面（主页、关于、联系方式）非常简单：
<template>
<h2> Home </h2>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<button type="button" @click="count++">count is {{ count }}</button>
<button type="button" @click="count++">count is {{ count }}</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
</script>它正在起作用，但看起来很乱，我不知道如何用一种好的方式来做。
我已经搜索过了，但是每个地方都在谈论如何使用路由，而我想避免路由和没有网址改变
1条答案
按热度按时间4ioopgfo1#
我认为你需要使用动态组件。你可以动态地指定在一个地方呈现哪个组件。