vue的手机端框架mint-ui头部header组件实现返回到上一个浏览页面

最新推荐文章于 2023-07-24 20:36:03 发布

转载最新推荐文章于 2023-07-24 20:36:03 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/beileixinqing/p/9225299.html

文章标签：

#ui #javascript #前端 #ViewUI

本文介绍了一种在Vue项目中实现按钮点击返回上一页的方法，通过使用<mt-button>组件并结合Vue Router的back方法，可以在不指定具体路径的情况下实现页面返回的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<mt-header title="中文号主页" fixed>
      <router-link to="" slot="left">
        <mt-button icon="back" @click="$router.back(-1)"></mt-button>
      </router-link>
</mt-header>

给里面的button按钮加click事件即可。不写router-link的跳转链接。

转载于:https://www.cnblogs.com/beileixinqing/p/9225299.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33936401

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue返回上一页，判断当前页有无上一页

weixin_43923808的博客

02-28

3185

vue返回上一页，判断当前页有无上一页

MintUI实现手机端首页头部导航

zk_yxrs的博客

06-01

353

文章目录一、效果图二、代码1.vue2.index.js总结 MintUI实现手机端首页头部导航一、效果图二、代码 1.vue 代码如下：有点击事件可跳转 <mt-header title="光会再次降临"> <div slot="right"> <router-link class="rl" to="/login">登录</router-link>  <router-link cl.

参与评论您还未登录，请先登录后发表或查看评论

3分钟学会搭建动态侧边栏导航：Vue + Element-UI

热门推荐

weixin_52268321的博客

02-26

2万+

3分钟学会搭建动态侧边栏导航：Vue + Element-UI

mint-ui —— header的使用

michael的博客

08-03

2万+

Header 顶部导航栏，支持显示按钮、自定义文字和固定在顶部。 Import 按需引入： import { Header } from 'mint-ui'; Vue.component(Header.name, Header); 全局导入：全局导入后不用再导入 import Mint from 'mint-ui' import 'mint-ui/lib/st

vue--实现移动端导航栏效果

小白小白从不日别的博客

12-08

4020

基本步骤： 1.搭建页面的基本结构和利用 v-for 渲染对应的数据 <template> <div class="wrap"> <div class="nav_left" id="navLeft"> <div class="nav_content"> <span v-for="(obj, index) in arr" :key="obj.first_id" @click="changeTab(ind...

vue.js中mint-ui框架的使用方法

12-29

本文为大家分享了vue.js中mint-ui框架的使用方法，具体内容如下 1.安装vue2.0的mint-ui框架 ...3.创建一个header.vue组件，里面写入mint-ui的头部组件问答> <router-link to=/search slot=lef

Vue修改mint-ui默认样式的方法

08-28

然后，我们可以使用这个变量来修改 Mint-UI 的各种组件的样式，例如 `.mint-header`、`.mint-button`、`.mint-badge` 等等。在修改 Mint-UI 的默认样式时，我们需要注意的是，我们需要在 `main.js` 文件中引入我们...

mint-ui-header示例

08-03

标题 "mint-ui-header示例" 暗示我们要讨论的是 Mint UI 框架中的 Header 组件的应用。Mint UI 是一套基于 Vue.js 的移动端组件库，它为开发者提供了丰富的预设组件，帮助构建优雅的移动端应用。在本示例中，我们将...

前端vue-移动端常用小功能-代码片汇总(持续更新)

在写作的路上持续输出。

06-27

636

前端vue-移动端常用小功能-代码片汇总(持续更新)

前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标

chenchuang0128的博客

06-11

1457

前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?" @click="goBackIndex">返回index页面"fontSrc": "/static/iconfont.ttf", // 字体文件。"text": "" // 字体图标\u 开头，加上字体图标unicode后面四位。"navigationBarTitleText": "首页",

小满Vue3第三十六章（Vue如何开发移动端）

qq1195566313的博客

06-30

2万+

开发移动端最主要的就是适配各种手机，为此我研究了一套解决方案在之前我们用的是rem 根据HTML font-size 去做缩放现在有了更好用的vw vhvw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一1.安装依赖因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件vite.config.ts 如果你用的vite 是 ts 他这个插件并没有提供声明文件我已经帮大家写好了声明文件（良心）引入声明

移动端适配与底部导航条

小志的博客

12-08

998

1.安装amfe-flexible和postcss-pxtorem，2.导入在main.js导入amfe-flexible3.配置在vue.config.js中写入在postcss.config.js中写入（没有文件就新建）组件中使用然后转化后看到的就是。

vue自定义移动端底部导航栏

weixin_51935690的博客

07-29

1678

完成主要由三部分组成 1.在components中内写好第一部分代码 2.新建四个文件用于底部的切换跳转即可，我的是 3.在router配置路径的跳转第一部分：在components中tabbar组件代码如下，图片路径换成自己的，可以自己添加底部数量 <template> <div> <div id="tab-bar"> <div class="tab-bar-item" @click="homeClick()">

ES 22 - Elasticsearch的分页查询及其深分页问题 (deep paging)

xiangjai的专栏

10-17

418

目录 1 分页查询方法 2 分页查询的deep paging问题 1 分页查询方法在GET请求中拼接from和size参数 // 查询10条数据, 默认从第0条数据开始 GET book_shop/_search?size=10 // 从第0条数据开始(包括第0条), 查询10条数据 GET book_shop/_search?from=0&size=10 // 从第5条数据开始(包括第5条), 查询10条数据 GET book_shop/_search?from=5&si.

手写移动端导航栏（仿京东）实例【VUE3】

一键难忘的博客

03-16

1787

class="{ active: currentIndex === index }：主要作用于文字选中下标红色，如果currentIndex（当前页面下标）和index （循环下标）相同时，返回Ture，class标签新加active，下面css代码有所体现。测试没有问题，写的时候吧内容放到了下面，不过功能已经实现，这个并不重要，介意的直接把app.vue里的内容和导航栏互换一下位置，然后把导航栏进行一个绝对定位即可完成。methods：方法，这里写自定义函数，目的，获取子组件传参，进行改变页面内容。

完善Vue简单项目的部分功能(ElementUI之首页导航&左侧菜单)

渡边彻的博客

07-24

2248

Vue简单项目之导航栏的切换

返回上一页返回主页面。。。vue

七月❤的博客

05-11

420

返回主页面 <input type="button" name="Submit" @click="goHome" class="reback"> methods:{ goHome:function (){ this.$router.push({path: '/'}) } } 返回上一页 <input type="button" name="Submit" onclick="javascript:history.back(-1);" value.

【VUE】微商城（三）----添加顶部标题栏返回按钮功能实现

Robin的博客

04-05

1920

1、顶部导航栏添加返回按钮 1）、打开mint-ui官网找到如下代码 <router-link to="/" slot="left"> <mt-button icon="back">返回</mt-button> </router-link> 2）、将以上复制的代码，放入到App.vue中 3）、将 <router-link></router-link> 标签修改成&.........

Mint-UI框架router-link返回上一页的方法 - 踩坑篇

草巾冒小子的博客

02-15

6738

使用mint-ui框架的header导航组件，&amp;lt;router-link to=&quot;&quot;&amp;gt;如何实现点击返回上一页？代码如下： &amp;lt;template&amp;gt; &amp;lt;!--header--&amp;gt; &amp;lt;mt-header title=&quot;注册

mint-ui的Header怎么玩？

05-27

mint-ui是一个基于Vue.js的UI组件库，Header是其提供的一个顶部标题栏组件。使用Header很简单，首先需要在Vue组件中引入Header组件： ``` <template> <div> <mt-header title="Header"></mt-header> </div> </template> <script> import { Header } from 'mint-ui' export default { components: { [Header.name]: Header } } </script> ``` 在上面的代码中，我们先引入Header组件，然后在Vue组件中注册该组件，这样就可以在模板中使用了。其中的`title`属性用于设置标题栏的文本内容。 Header还提供了一些其他的属性，可以用来设置导航栏的样式、返回按钮的样式等。具体可以参考mint-ui官方文档。