在vue3中点击图片实现页面跳转
时间: 2024-02-23 13:01:47 浏览: 32
在 Vue3 中点击图片跳转页面也可以使用 Vue Router 进行路由控制,以下是一个简单的示例:
1. 在 main.js 中导入 Vue Router:
```
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
});
createApp(App).use(router).mount('#app');
```
2. 在组件内的模板中添加图片,并使用 `router-link` 标签包裹图片来实现路由跳转:
```
<template>
<div>
<router-link to="/about">
<img src="/path/to/image.jpg" alt="Image description">
</router-link>
</div>
</template>
```
这样点击图片就可以跳转到 `/about` 路由对应的页面了。需要注意的是,使用 `router-link` 标签来包裹图片时,需要将图片放在 `router-link` 的内部,而不是使用 `v-bind` 来绑定 `src` 属性。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)