div地址跳转 vue_vue跳转页面的几种方法(推荐)

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

1：router-link跳转

点击跳转2

点击跳转1

点击跳转3

2：this.$router.push()

点击跳转4

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}});

}

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

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

第一种方式：path - query 传参

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

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

第一种方式：path - query 传参

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

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

点击跳转5

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

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

testDemo{{this.$route.query.setid}}

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

Vue：router-lin

[跳转到主页]

[登录]

[登出]

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

[跳转到主页]

export default {

name: "App",

methods: {

// 跳转页面方法

goHome() {

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

}

this.$router.go(1);

[上一页]

[下一页]

upPage() {

// 后退一步记录，等同于 history.back()

this.$router.go(-1);

downPage() {

// 在浏览器记录中前进一步，等同于 history.forward()

this.$router.go(1);

}

代码示例：

[跳转到主页]

[登录]

[登出]

[跳转到主页]

[上一页]

[下一页]

export default {

name: "App",

methods: {

// 跳转页面方法

goHome() {

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

upPage() {

// 后退一步记录，等同于 history.back()

this.$router.go(-1);

downPage() {

// 在浏览器记录中前进一步，等同于 history.forward()

this.$router.go(1);

}

};

总结

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

本文标题: vue跳转页面的几种方法(推荐)

本文地址: http://www.cppcns.com/wangluo/javascript/304022.html

div地址跳转 vue_vue跳转页面的几种方法(推荐)相关推荐

vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法
vue-router跳转时打开新页面的两种方法最近还是在痛苦的挣扎中挣扎吧记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.标签实现新窗口打开 ...
vue 跳转页面带对象_vue跳转页面的几种方法(推荐)
vue跳转不同页面的多种方法 1:router-link跳转点击跳转2 点击跳转1 点击跳转3 2:this.$router.push() 点击跳转4 export default{ name:'t ...
小程序跳转公众号关注页面的两种方法
一.web-view方法这个种方法有一个必须要达到的条件就是:小程序的公众号必须是认证的企业号,而且要在小程序公众号的后台添加"veb-view业务域名"!不然会出现如下情况 & ...
springmvc跳转到自定义404页面的三种方法
有时候我们并不想跳转到系统自定义的错误页面中,那么我们需要自定义页面并且实现它的跳转有三种方法可以实现方法一:最简单的实现,也是最快的在<web-app>节点下配置代码如下: 1 ...
【转载】让DIV的滚动条自动滚动到最底部的3种方法
转载自:脚本之家 → 网络编程 → JavaScript → javascript技巧 → 让DIV的滚动条自动滚动到最底部的3种方法(推荐) http://www.jb51.net/article ...
asp.net服务器端跳转页面的三种方法
asp.net服务器端跳转页面的三种方法 1.Response.Redirect这个跳转页面的方法跳转速度不快,因为它要走2次回发(postback). 它可以跳转到任何页面,没有站点页面限制(可以由 ...
SpringBoot 之跳转页面的几种方法
** SpringBoot 之跳转页面的几种方法 ** 1. a 标签的通用跳转方法 <a href="toPage?url=/vue/vue">链接 1</a ...
html给页面整体添加左右边距_HTML嵌入页面的几种方法
HTML嵌入页面的几种方法作者:wsir 发布时间:2019/12/17 21:07:10 分数:0 跟帖:0 一.应用框架技术在页面中嵌入外部页面的方法是,在页面中包含外部页面的位置插入&quo ...
禁止手机侧滑返回上一个页面的三种方法
禁止手机侧滑返回上一个页面的三种方法侧滑返回上一个页面用户体验很很好.但是在特别的场景侧滑返回上一个页面严重影响用户体验: 1.如正在斗地主,结果在出牌时,由于出最左边的牌时,不小心触发了侧滑离开斗 ...

div地址跳转 vue_vue跳转页面的几种方法(推荐)

div地址跳转 vue_vue跳转页面的几种方法(推荐)相关推荐

最新文章

热门文章