vue跳转页面的几种方法(推荐)

vue跳转不同页面的多种方法

1：router-link跳转

<!-- 直接跳转 -->
<router-link to='/testDemo'>
 <button>点击跳转2</button>
</router-link>

<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>点击跳转1</button>
</router-link>

<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>点击跳转3</button>
</router-link>

2：this.$router.push()

<template>
 <div id='test'>
 <button @click='goTo()'>点击跳转4</button>
 </div>
</template>
<script>
 export default{
 name:'test',
 methods:{
 goTo(){
 //直接跳转
 this.$router.push('/testDemo');

 //带参数跳转
 this.$router.push({path:'/testDemo',query:{setid:123456}});
 this.$router.push({name:'testDemo',params:{setid:111222}});
 }
 }
 }
</script>

params和query传参数有什么不一样？？在地址栏中可以看到，params传参数时，地址栏中看不到参数的内容，有点像ajax中的post传参，query传参数时，地址栏中可以看到传过来的参数信息，有点像ajax的个体传参

如果单独传setId一个参数的时候，地址栏中的地址如下图：

第一种方式：path - query 传参

第二种方式：name - params传参数

但是一般情况下，传参数是传递一个对象，当传递的是一个对象的时候，地址栏中的地址如下图：

第一种方式：path - query 传参

第二种方式：name - params传参数

3：a标签可以跳转么？？可以跳转外部链接，不能路由跳转

<a href="https://www.baidu.com"><button>点击跳转5</button></a>

接收方怎么接收参数？？this.$route.query.serid和this.$route.params.setid，以下举一个接收的例子

注意接收参数时是 $route 不是 $router

<template>
 <div>
 testDemo{{this.$route.query.setid}}
 </div>
</template>

知识点补充：vue三种不同方式实现页面跳转

Vue：router-lin

 <router-link to="/">[跳转到主页]</router-link>
 <router-link to="/login">[登录]</router-link>
 <router-link to="/logout">[登出]</router-link>

this.$router.push("/");

<button @click="goHome">[跳转到主页]</button>
export default {
 name: "App",
 methods: {
 // 跳转页面方法
 goHome() {
 this.$router.push("/");
 },
}

this.$router.go(1);

 <button @click="upPage">[上一页]</button>
 <button @click="downPage">[下一页]</button>
 upPage() {
 // 后退一步记录，等同于 history.back()
 this.$router.go(-1);
 },

 downPage() {
 // 在浏览器记录中前进一步，等同于 history.forward()
 this.$router.go(1);
 }

代码示例：

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <router-view/>
 <router-link to="/">[跳转到主页]</router-link>
 <router-link to="/login">[登录]</router-link>
 <router-link to="/logout">[登出]</router-link>

 <!-- javascript跳转页面 -->
 <button @click="goHome">[跳转到主页]</button>

 <!-- 回到上一页 -->
 <button @click="upPage">[上一页]</button>
 <button @click="downPage">[下一页]</button>

 <!-- 回到下一页 -->

 </div>
</template>

<script>
 export default {
 name: "App",
 methods: {
 // 跳转页面方法
 goHome() {
 this.$router.push("/");
 },
 upPage() {
 // 后退一步记录，等同于 history.back()
 this.$router.go(-1);
 },
 downPage() {
 // 在浏览器记录中前进一步，等同于 history.forward()
 this.$router.go(1);
 }
 }
 };
</script>

总结

到此这篇关于vue不同方法跳转页面的几种方法的文章就介绍到这了,更多相关vue 跳转页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于vue循环列表时点击跳转页面的方法

    1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

  • 详解刷新页面vuex数据不消失和不跳转页面的解决

    详解刷新页面vuex数据不消失和不跳转页面的解决

    先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与重启项目,之前获取到的数据也只是通过store暂存起来,项目关闭时就不见了,这有些像电脑重启,存储在RAM的数据会消失.但是储存在sessionstorage.localstorage和cookie里的内容不会消失. Vuex 方法思路 首先得熟悉vuex,官网中介绍 Vuex 是一个专为 Vue.

  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

  • vue单页面应用打开新窗口显示跳转页面的实例

    一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要. 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定: this.$router.push({name: 'abc'}) 以上是常规的通过路由的页面跳转方法. 我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变. const { href } = this.$router.resolve({ name: 'abc' }) window.

  • mpvue跳转页面及注意事项

    mpvue跳转页面及注意事项

    下面先给大家介绍下mpvue跳转页面,具体内容如下所示: 正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路. 第一步就是配置环境之类的...附上官网的quickstart    http://mpvue.com/mpvue/quickstart/ 相信看完官网的教程之后, 你的项目应该已经搭好了.下面说2个小问题的解决办法吧 1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧) build文件夹---

  • vue 解决form表单提交但不跳转页面的问题

    vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转: <form id="msgForm" action="" method="post" @submit.prevent="sub"> sub函数写在methods内: methods:{ $.post('http://api.test.ai/visitorinfo/', $('#msgForm').serial

  • vue-router跳转页面的方法

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 <!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> </router-link> <!-- 带参数跳转 --> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳

  • 利用vue实现打印页面的几种方法总结

    目录 1.第一种就是直接调用 window.print()方法 2.第二种使用v-print 3.第三种使用print.js 总结 1.第一种就是直接调用 window.print()方法 这种方法的坏处就是 默认打印整个页面,不能打印局部页面. 2.第二种使用v-print 首先先下载 npm install vue-print-nb --save 然后在main.js中引入 main.js中引入 import Print from 'vue-print-nb' Vue.user(Print)

  • springMVC使用jsp:include嵌入页面的两种方法(推荐)

    1.静态嵌入子页面 <%@ include file="header.jsp" %> 静态嵌入支持 jsp . html . xml 以及纯文本. 静态嵌入在编译时完成,相当于直接将子页面的文本插入到 include 标签所在的位置.子页面可直接使用父页面中的变量. 2.动态嵌入子页面 使用 jsp:include 时必须设置 flush 属性为 true . <jsp:include page="/main/header.jsp" flush=&

  • vue中使用WX-JSSDK的两种方法(推荐)

    公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题.本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效. 一.通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk 2.将微信jsdk挂载到全局上 在utils目录下新建WechatPlugin.js WechatPlugin.js import wx from 'we

  • asp.net跳转页面的三种方法比较

    1. response.redirect 这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但他可以跳 转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护. 但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session. 2. server.transfer 速度快,只需要一次pos

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • JS 跳转页面延迟2种方法

    方法1: 复制代码 代码如下: <SPAN style="FONT-SIZE: 12px"><script type="text/javascript"> <!-- function go(t,url){ //t设置跳转时间:秒 //url设置跳转网址 document.write("<div id=text>本页将在<strong id='tt'></strong>后,跳转至:<sp

  • vue跳转页面常用的4种方法与区别小结

    目录 1:router-link跳转 2:this.$router.push() 3. this.$router.replace() 4. this.$router.go(n) ps:区别 总结 vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下. 1:router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to=

  • js实现页面跳转的五种方法推荐

    js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo

  • vue项目刷新当前页面的三种方法

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

随机推荐