1、用点击函数

 <button  class="btntop" @click="gootherpage">跳转页面</button>

函数

gootherpage(){
this.$router.push('/FileDetail')
},

2、rooterlink

<router-link to="/FileDetail"  tag='a'>详情 </router-link>

注以上方法都需要先配置页面的路由

  {
path: '/FileDetail',
name:'FileDetail',
component: FileDetail
}

vue实现页面跳转(简易版)的更多相关文章

  1. vue前端页面跳转参数传递及存储

    不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...

  2. vue 实现页面跳转

    首先,vue项目文件夹如下: components下有两个.vue文件,HelloWorld为创建时自动建立的,login需要自己创建的,login页面效果如下: 首先实现登录按钮的跳转,先对inde ...

  3. Vue项目页面跳转时候的,浏览器窗口上方的进度条显示

    1.安装: cnpm install --save nprogress 2.在main.js中引入: import NProgress from 'nprogress' import 'nprogre ...

  4. vue中页面跳转拦截器的实现方法

    首先对index.js的router进行配置; export default new Router({ routes: [ { path: '/consultancy', name: 'consult ...

  5. 【完美解决】vue,页面跳转样式错位但是刷新又好了的情况

    在vue文件中,做样式分离: 将覆盖样式单独写在一个style标签内,原页面写在 scoped样式作用域下.

  6. VUE,页面跳转传多个参数

    <template> <a @click="goNext">Next</a> <input type="text" v ...

  7. h5页面调用摄像头(简易版)

    <input type="button" value="OpenVideo" id="btnOpenVideo" /> < ...

  8. vue具体页面跳转传参方式

    1.写数据,可以使用“.”,”[]”,以及setItems(key,value);3种方式. 例如: localStorage.name = proe;//设置name为" proe &qu ...

  9. Vue -- 项目报错整理(2):IE报错 - ‘SyntaxError:strict 模式下不允许一个属性有多个定义‘ ,基于vue element-ui页面跳转坑的解决

随机推荐

  1. Redis安装部署以及简单应用

    Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表(list ...

  2. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3

    5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...

  4. phpredis 报错 “Function Redis::setTimeout() is deprecated” 解决方法

    项目在本地开发过程中抛出异常: Function Redis::setTimeout() is deprecated 找到出错代码: <?php use Illuminate\Support\F ...

  5. java将前端的json数组字符串转换为列表

    记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表. 前端数据转化与请求 var contracts = [ {id: '1', name: 'yanggb合同1'}, {i ...

  6. Jedis & spring-data-redis

    当我们了解了redis的五大数据类型,手动去敲一敲每个数据类型对应的命令,无论是再来看jedis,还是spring-data-redis都是很轻松的,他们提供的API都是基于原生的redis命令,可读 ...

  7. Java并发专题

    ——参考于码农求职小助手公众号 1.并行和并发有什么区别? 1. 并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔发生: 2. 并行是在不同实体上的多个事件,并发是在同一 ...

  8. 【实习第一天】odoo开发基础(一)

    管理权限 在项目中,有个security文件夹,其中的ir.model.access文件后面带4个参数.分别代表着读,写,创建,删除的操作 想要开启权限需要将其参数调成为1,反之为0.倘若不调整参数, ...

  9. Linux相关集合

    本篇概述 Linux xshell6 连接 Hadoop 启动关闭 Linux xshell6 连接相关问题 首先,虚拟机 得先能通成网(具体教程可百度) 然后,进行 本机 ip 的查询(xshell ...

  10. vue的类element的input类型组件封装

    前提:题主之前只是随意的封装,项目统一ui,然后只实现了父组件拿子组件值,没有实现父组件修改子组件的值,仔细看了文档才知道用model的作用,直接上代码 Vue.component("bas ...