点击按钮实现路由的跳转 <div @click="gotoMenu">按钮</div> 实现跳转 methods: { gotoMenu(){ //跳转到上一次浏览的页面 this.$router.go(-1) this.$router.go(-1) //指定跳转的地址 this.$router.r ...
转载 2021-08-16 15:20:00
778阅读
2评论
实现技术:webpack构建工具:                  jquery:                  bootstrap:          &nbsp
转载 2024-06-04 01:23:20
44阅读
1.需求最近遇到一个需求,需要从一个页面跳到另一个页面的指定锚点,如果是页面上的锚点还简单,但是那个锚点在页面的组件里面。所以稍微研究了一下2.跳转锚点的基本方式2.1 页面内通过点击来跳转即添加一个a标签,href以#开头,然后在需要跳转的地方添加一个element,id设置为a标签href属性相同的值,只是不要#,就可以了,这是最简单的方式<a href="#miao">去找喵星人
vue中3种方法跳转界面使用 router-link 元素进行跳转 <router-link to="/example">Go to Example page</router-link>使用 this.$router.push 方法进行跳转 this.$router.push('/example');使用 this.$router.replace 方法
转载 2024-02-27 09:27:18
140阅读
第一步:使用vue-cli搭建项目(注:建议安装淘宝镜像,使用cnpm执行下面操作)         1.按住shift按钮,右键点击存放项目的文件夹,点击在此处打开命令窗口。        2.在命令窗口中输入 npm install -
一、准备工作:首先使用vue-cli搭建一个空的vue项目,步骤见。二、单页面改造多页面操作步骤:1、目录调整:对src目录进行一些调整:调整前是这样的:        (1)进入src文件夹中,新建一个文件夹,如取名pages,用于存放后面的多页面,在pages里面新建一个文件夹叫index用于存放首页,然后将下图红框内的文件(文件夹)都拉进in
转载 2024-04-13 10:09:42
988阅读
一、效果图二、准备工作      1、所需接口      /redis-manage/del-key   ->   删除指定的key,用于删除单个缓存      /redis-manage/del-keys   ->   删除多个key,用于清空缓存      /redis-manage/info   ->   获取Redis信息      /re...
原创 2021-07-12 15:33:56
3093阅读
## 实现Vue页面跳转的步骤 为了实现Vue页面跳转,我们需要使用Vue Router和Axios两个库。Vue Router是Vue官方提供的路由管理器,用于实现页面之间的跳转和导航。而Axios是一个基于Promise的HTTP库,用于发送异步请求和处理服务器返回的数据。 下面是实现Vue页面跳转的步骤和相应的代码: | 步骤 | 代码 | 说明 | | --- | --- | ---
原创 2023-07-25 16:48:36
528阅读
使用 laravel 创建一个 Vue页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中,我们将学习如何构建并运行一个以 Vue 路由为前端,laravel 为后端的 SPA 应用。首先我们将注意力集中在编写每一个小的功能代码块上,然后在后续的教程中,我们再演示如何将 Laravel 作为 API 层而构建一个完整的应用。 一个以 Laravel 为后端的
问题描述:vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转。实验结果与讨论:1.创建一个vue-c...
原创 2021-11-19 17:04:15
1180阅读
以下是一个被封装的box组件,在父组件中点击该组件可以实现打开一个新页面: Box.vue 1 <template> 2 <div class="box"> 3 <div class="grid-content bg-purple"> 4 <div 5 class="title-style" 6 @ ...
转载 2021-10-13 11:03:00
3371阅读
2评论
Vue实现点击跳转页面,通常有两种常见的方式:使用<router-link>组件和编程式导航。下面分别介绍这两种方法。使用<router-link>组件<router-link>是Vue Router提供的组件,用于创建链接,激活时可以自动添加CSS类,处理活性状态,并且支持 <a> 标签的全部特性。示例代码:<template>
原创 精选 2024-08-22 11:20:22
795阅读
最近需要做一个下载vue页面为pdf格式的功能,网上方案有很多,也尝试了其他方案,最终采用的方案 流程就是点击下载报告按钮,则请求后端一个接口,例如接口地址为example.cn/file/downlo…, 则返回一个pdf的文件地址 即可实现下载。背后原理就是利用爬虫抓取页面然后转为pdf,存储在服务器静态资源目录,当然过程是怎样呢?接下来记录一下:1.[前端]准备好一个vue页面页面就是最终
转载 2023-11-11 20:28:18
95阅读
#使用props传递数据html:传递普通的字符串<h3>#使用props传递数据</h3> <div id="dr01"> <div>组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。</div> <br /> <chi
转载 1月前
400阅读
第一种:页面中的宽度都用百分比来做。页面中盒子的高度不能设固定高度。开始学DIV+CSS布局的时候我给每个盒子都设置了固定的宽和高,这样页面做起来非常快,只需要先把页面整体的布局结构搞定,再往里面丢内容就行了,但是后来发现这样的结构是错误的,调整浏览器的宽度里面的内容可能会冲破盒子。正确的思路是高度由内容去撑起来,不管你如何去缩小,内容都不会跑出盒子。百分比是按照父元素的宽度来计算的,包括marg
转载 2023-12-06 19:16:05
65阅读
如何简单使用vue这次就来说说如何使用VUE。首先是吧,肯定得有项目文件,就先创建一个新的项目文件。然后把VUE的文件放到我的项目文件中,再进行引入VUE文件。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U
vue缓存分为页面缓存、组建缓存、接口缓存,这里我主要说到了页面缓存和组建缓存页面缓存:在server.js中设置const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期。 }) const isCacheable = req =&
项目效果:(吼吼~感觉蛮简单的一个效果,却摸索了两三个小时,厉害啦~) 效果要求:        通过点击A页面列表中的查看,访问B页面的列表详情效果实现:        首先,我给A页面列表中的查看按钮添加点击事件,由于是用iview框架做的table,所以必须要清楚如何给查看按钮添加点击事件,请看截图:s
页面不想单页面可以使用router.beforeEach 钩子。因为router都没使用了 登录才能访问。这里有个方式呢,就是利用路径屁匹配的方式达到拦截的效果。原理呢就是访问的时候去匹配该路由是否需要权限,如果需要就结合判断登录状态去拦截。核心代码就在这:/** *获取路由地址路径 * @returns {...
原创 2021-07-12 09:43:30
792阅读
一、首先是如何将别人的项目导入并实现运行。1.将项目下载并导入Idea,修改并检查配置文件。2.需要在Idea中安装vue的运行环境。3.在Idea的Terminal界面输入npm install,安装vue的依赖。4.输入npm run dev来开始运行vue项目。5.启动SpringBoot后台。 二、vue的生命周期。 Vue的生命周期主要就主要是开始创建、初始化数据、编
  • 1
  • 2
  • 3
  • 4
  • 5