VUE 点击图片直接进行页面跳转

        <imgsrc="../assets/person.png"@click="docs"style="float: right; padding-right: 3%"/>

最简单的就是设定一个@click，给它一个名字，在script中进行方法定义，但这个跳转直接改变了url，只有父组件中保存的内容才会保留，比如提前设定的header

<script>
/* eslint-disable */
import AboutView from "../views/AboutView.vue";
import { Header } from 'mint-ui'
export default {name: 'Header',components: {AboutView,'mt-header': Header},data () {return {}},methods: {docs() {console.log("转到个人界面");this.$router.push("/AboutView");},},
}
</script><style scoped>
.mint-header{background-color: #fdfdff;color: #292828;font-size: 13px;}
img {border: 0px solid #ddd;width: 30px;height: 30px;position: relative;border-radius: 25px;padding: 4px;
}
</style>

VUE 点击图片直接进行页面跳转相关推荐

vue怎么实现图标循环和页面跳转页面跳转
vue 怎么循环图标并实现页面跳转 <div class="container"><ul class="menus"><label ...
【html】点击图片内链接进行跳转
博主因为工作中遇到,有些UI图片里有多个链接,要求用户可以点击图片内相关的链接进行跳转. 比如:以下是一张图片(非页面),但是要求点击图片不同位置,跳转到不同网址: 方法: 1.如果仅在PC端展示页面 ...
vue+element实现鼠标移入出现按钮,并点击图片可跳转页面
实现效果点击图片后跳转页面实现代码 html <template><div class="course-container"><el-row :g ...
HTML点击图片实现提交或跳转链接页面
点击图片提交提交后实现跳转,但需要注意的是:鼠标光标放在图片上,显示的还是箭头(没有改变). .css input{width: 400px;height: 400px;border: 3px so ...
Vue的项目搭配以及实现页面跳转【电竞杜小帅】
Vue的项目搭建 1.安装Node.js 下载Node.js,Node.js安装包及源码下载地址:https://nodejs.org/en/download,其他默认就行. 安装好了以后调出命令行输 ...
vue点击图片查看大图使用插件 vue-photo-preview
1.引入插件 npm install vue-photo-preview --save 2.main.js import preview from 'vue-photo-preview'import ...
vue点击图片后复制图片url_简单漂亮的（图床工具）开源图片上传工具——PicGo...
介绍 PicGo: 一个用于快速上传图片并获取图片URL链接的工具,由vue-cli-electron-builder构建的简单漂亮的图片上传工具!基于electron-vue开发,支持macOS,W ...
SAP Spartacus org unit list点击item之后的页面跳转实现
如下图所示,organization unit list选中一行点击后,会跳转到明细页面: 这个list行项目点击后跳转的触发事件为launch,执行的函数为launchItem($event): 我 ...
vue点击图片实现大图预览
npm安装viewer组件 npm i v-viewer 在main.js中引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer. ...

VUE 点击图片直接进行页面跳转

VUE 点击图片直接进行页面跳转相关推荐

最新文章

热门文章