用vue写一个页面,页面有8行文字,点击文字可以跳转到相应页面
时间: 2023-06-10 14:09:16 浏览: 50
假设你已经安装好 Vue.js,那么可以按照以下步骤来实现要求:
1. 在你的 Vue 项目中创建一个新的组件,比如 `TextLink`,可以使用 `vue-cli` 的命令行工具来创建:
```
vue create my-project
cd my-project
vue generate component TextLink
```
2. 在 `TextLink` 组件的模板中添加 8 行文字和对应的链接,比如:
```
<template>
<div>
<a href="page1.html">第一行文字</a>
<a href="page2.html">第二行文字</a>
<a href="page3.html">第三行文字</a>
<a href="page4.html">第四行文字</a>
<a href="page5.html">第五行文字</a>
<a href="page6.html">第六行文字</a>
<a href="page7.html">第七行文字</a>
<a href="page8.html">第八行文字</a>
</div>
</template>
```
3. 在父组件中使用 `TextLink` 组件,比如:
```
<template>
<div>
<h1>欢迎来到我的网站</h1>
<TextLink />
</div>
</template>
```
4. 运行你的 Vue 项目,即可看到 8 行文字,并且点击每行文字都可以跳转到对应的页面。