英文:
How can I resolve the issue of being unable to connect NuxtLink to pages and components in my Nuxt.js project?
问题
Screenshot of the project structure
我正在尝试创建NuxtLink组件并将它们连接到页面。具体来说，我想将Navbar组件中的"ContactUs"链接连接到Contact页面。以下是我到目前为止尝试的代码片段：
在Navbar/components中：
<li class="nav-item">
<NuxtLink to="/contact" class="nav-link click-close">ContactUs</NuxtLink>
</li>
在pages中：
<template>
<div>
<section id="contact">
<h1>Contact</h1>
</section>
</div>
</template>
<script>
export default {
name: 'contact'
}
</script>
英文:
Screenshot of the project structure
I am trying to create NuxtLink components and connect them to pages. Specifically, I want to connect the 'ContactUs' link in my Navbar component to the Contact page. Here's the code snippet I have tried so far
In Navbar/components:
"[<li class="nav-item"><NuxtLink to="/contact" class="nav-link click-close">ContactUs</NuxtLink></li>][1]"
In pages:
"<template>
<div>
<section id="contact">
<h1>Contact</h1>
</section>
</div>
</template>
<script>
export default {
name: 'contact'
}
</script>"
答案1
得分: 0
如果你的结构正确，name属性是不需要的，路由是由文件夹和文件的名称定义的。
如果链接的页面存在于文件夹和文件中，链接将起作用。
我假设你想要在每个页面中都有一个带有导航栏的布局。
在导航栏中，你想要链接到页面。
如果是这种情况，这个基本配置将起作用：
app.vue
layout
default.vue
components
navBar.vue
pages
index.vue
contact.vue
- app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
- layout/default.vue
<template>
<div>
<NavBar />
<slot />
</div>
</template>
- components/navBar.vue
<template>
<div>
<NuxtLink to="/">Home</NuxtLink>
|
<NuxtLink to="/contact">Contact Us</NuxtLink>
</div>
</template>
- pages/index.vue
<template>
<NuxtLayout>
<div>This is the homepage</div>
</NuxtLayout>
</template>
- pages/contact.vue
<template>
<NuxtLayout>
<div>This is the contact page</div>
</NuxtLayout>
</template>
请注意，我使用了NuxtPage和NuxtLayout，它们在任何项目结构中都非常有用。
我为你创建了一个可工作的示例，点击此处查看。
希望这对你有所帮助。
英文:
If your structure is correct, the name property is not needed and the routes are defined by the folders and files names.
If the linked page exists by folder and file, the link will work.
I assume you want a layout with a navbar in every page.
In the navbar you want the links to the pages.
If this is the case, this basic configuration will work:
app.vue
layout
default.vue
components
navBar.vue
pages
index.vue
contact.vue
- app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
- layout/default.vue
<template>
<div>
<NavBar />
<slot />
</div>
</template>
- components/navBar.vue
<template>
<div>
<NuxtLink to="/">Home</NuxtLink>
|
<NuxtLink to="/contact">Contact Us</NuxtLink>
</div>
</template>
- pages/index.vue
<template>
<NuxtLayout>
<div>This is the homepage</div>
</NuxtLayout>
</template>
- pages/contact.vue
<template>
<NuxtLayout>
<div>This is the contact page</div>
</NuxtLayout>
</template>
Note that I used NuxtPage and NuxtLayout that are very useful in any project structure.
I created a working reproduction for you here
I hope this help.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论