对vue2.0中.vue文件页面跳转之.$router.push的用法详解

vue2.0在使用的过程中， .vue文件之间的跳转，在template中的常见写法是：

<router-link to="/miniCard/statement/horizon">
  <button class="btn btn-default colorDe">继续</button>
</router-link>

但是有时的需求是页面不直接跳转，有确认弹框或者其他事件，此时就需要在js中设置跳转，常用的一种方法是 .$router.push ，用法如下：

this.$router.push({path: '/...'});

希望本文对您有所帮助！

拓展知识：解决this.$router.push无法在新窗口打开的问题

如下所示：

let routeData = this.$router.resolve({ path: '/reportpreview', query: { id: id } });
 window.open(routeData.href, '_blank');

以上这篇对vue2.0中.vue文件页面跳转之.$router.push的用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue-router 中hash模式和history模式的区别

    Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash";   mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向

  • vue-router中scrollBehavior的巧妙用法

    问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></

  • vue实现同一个页面可以有多个router-view的方法

    使用Vue+Element搭建项目的时候,为了避免一个页面过大,将tab里面的内容分成多个页面,并使用同级视图展示 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户详情" name="first"> <router-view></router-view> </el-t

  • 浅析vue-router jquery和params传参(接收参数)$router $route的区别

    浅析vue-router jquery和params传参(接收参数)$router $route的区别

    今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!! this.$router 和this.$route有何区别? 在控制台打印两者可以很明显的看出两

  • 全面解析vue router 基本使用(动态路由，嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • 解决vue.js this.$router.push无效的问题

    如下所示: login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push(&qu

  • vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

  • vue router总结 $router和$route及router与 router与route区别

    vue router总结 $router和$route及router与 router与route区别 1 this.$router和this.$route的区别 vue router this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$router.back()就会回退之前的url. this.$route相当于当前激活的路由对象,包含当前ur

  • 基于vue-router 多级路由redirect 重定向的问题

    在做多级路由的时候遇到很多问题,虽然不难,但是如果没有经验,往往要花一整天时间才能解决(可能我笨),况且网上资料也很少. 项目需要是这样的: 登录页面跳到后台页面重定向,登录页是一级路由 对应页面 登录后: 同时重定向二级和三级页面, 这样登录就会重定向了,此时url 但又有一个问题:当再次点击底部"堂食"的时候, url变成这样,并且三级页面没有出来 解决办法是:在这个"堂食"按键 添加一个方法 记住,也只有这样传参才有效 如果在<router-link&g

  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

  • Yii2中hasOne、hasMany及多对多关联查询的用法详解

    Yii2中hasOne、hasMany及多对多关联查询的用法详解

    前言 hasOne.hasMany是Yii2特有的用于多表关联查询的函数,平时在使用多表关联查询的时候建议使用它们.为什么?因为这种方式关联查询出来的结果会保留Yii2自有的表头排序功能,以及CheckboxColumn中input的id存值,至于还有没有其它的好处就需要大家去挖掘了,笔者目前就发现了这两个常用的好处.其他的关联查询,像yiidbQuery查询或者原生的SQL语句查询都没有,查询出来在列表展示的时候,表头一排黑. Yii2的hasOne.hasMany多表关联查询,不管是文档还是

  • JavaScript中的普通函数和箭头函数的区别和用法详解

    最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 function make () { return ()=>{ consol

  • js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解

    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索. substring() 方法用于提取字符串中介于两个指定下标之间的字符. substr(start,length)表示从start位置开始,截取length长度的字符串 split 将一个字符串分割为子字符串,然后将结果作为字符串数组返回 replace 用于在字符串中用一些字符替换另一些字符,或替换一个与正则

  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

  • vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

    本文实例讲述了vue使用自定义事件的表单输入组件用法.分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value&

  • PHP页面静态化——纯静态与伪静态用法详解

    PHP页面静态化——纯静态与伪静态用法详解

    本文实例讲述了PHP页面静态化--纯静态与伪静态用法.分享给大家供大家参考,具体如下: 为什么要静态化页面? 当用户访问一个不经常更新的Web页面,PHP接到指示对php脚本文件进行解析,从数据库查询到该页面所需要的数据,然后对页面模板进行渲染,最后将一个成品页面展示给用户.单次请求对于服务器来说非常简单,处理起来非常快,但是如果同时有成千上万各用户请求该页面呢?这无疑是对资源的一种浪费,这就是我们要做静态的目的. 静态化分为纯静态与伪静态,纯静态又分为局部纯静态和全部纯静态. 伪静态 伪静态顾

  • Python中.join()和os.path.join()两个函数的用法详解

    Python中有.join()和os.path.join()两个函数,具体作用如下: . join():    连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串 ''    os.path.join():  将多个路径组合后返回 >>#对序列进行操作(分别使用'  ' .' - '与':'作为分隔符) >> a=['1','2','3','4','5'] >> ' '.join(a) 1 2 3 4 5 >>';'.j

  • Javascript中Math.max和Math.max.apply的区别和用法详解

    最近在做一个小案例的时候遇到了Math.max.apply这么一个用法,之前很少遇到过感觉挺有趣的,就记录一下. 1Math.max 语法: Math.max(n1,n2,n3,...,nX) 返回值:max() 方法可返回指定的参数中带有较大的值的那个数 var a = Math.max(1,2,3,4); console.log(a); //4 但是如果数据是放在一个数组里面,此时就不能这样调用了.这时就用到apply方法 2Math.max.apply apply() 方法调用一个函数.简

  • Flask框架中密码的加盐哈希加密和验证功能的用法详解

    密码加密简介 密码存储的主要形式: 明文存储:肉眼就可以识别,没有任何安全性. 加密存储:通过一定的变换形式,使得密码原文不易被识别. 密码加密的几类方式: 明文转码加密:BASE64, 7BIT等,这种方式只是个障眼法,不是真正的加密. 对称算法加密:DES, RSA等. 签名算法加密:也可以理解为单向哈希加密,比如MD5, SHA1等.加密算法固定,容 易被暴力破解.如果密码相同,得到的哈希值是一样的. 加盐哈希加密:加密时混入一段"随机"字符串(盐值)再进行哈希加密.即使密码相同

随机推荐