vue跳转页面的几种方法,vue中跳转
页面跳转一般通过路由跳转来实现，通常也可以直接通过router-link标签来实现。下面这篇文章主要介绍vue如何通过点击事件实现页面跳转的相关信息，有需要的朋友可以参考一下。
目录
为此作序。$ router.push () This。$ router.push()记录规则参数的接收。补充：VUE实现在指定位置从一个页面跳转到另一个页面的摘要。
前言
页面跳转通常是通过路由跳转来实现的。通常，我们可以直接使用router-link标签来实现页面跳转。但是如果我们要点击其他标签实现页面跳转呢？这个时候，我们就用这个。$router.push()方法。下面简单介绍一下它的使用方法！
this.$router.push()
1.首先我们必须定义一个点击事件。
2.称之为。定义的事件中的$router.push()方法
模板
Button @click=handle 点击跳转/button
/模板
脚本
导出默认值{
方法：{
句柄(){
//path /home对应路由器目录下index.js中定义的path属性值。
这个。$ router . push(/home )；
}
}
}
/脚本
目标页面路由在路由器目录下的index.js中定义如下：
导出默认新路由器({
路线：[
{
路径：“/home”，
姓名：家，
成分：家，
},
]
})
this.$router.push()中的参数规则
是参数字符串，即路径名。
//path /home对应路由器目录下index.js中定义的path属性值。
这个。$ router . push(/home )；
参数是一个对象。
//对应路由器目录中index.js定义的路径。
这个。$ router . push({ path:/home })；
将参数命名为route。
//对应路由器目录中index.js定义的名称
这个。$ router . push({ name: Home })；
带传输参数
//params包含我们要传递过去的参数。
这个。$router.push({name:Home ，params:{ user: David } })；
使用查询参数
//有了查询参数，过去的内容会自动拼接成/home？用户=大卫
这个。$router.push({path:/home ，query:{ user: David } })；
参数的接收
当我们使用params传递参数时，我们只需要使用这个。$route.params在接收参数的位置接收参数。
例如：
//传递参数
这个。$router.push({name:Home ，params:{ user: David } })；
//在名为Home的组件中接收参数
const id=this。$ route . params . id；
console.log(这个。$ route . params)；//打印结果是{user:david}
当我们使用query传递参数时，我们只需要使用这个。$route.query来接收参数，用法同上。
！这里有个小细节：$符号后面是route而不是router，跳的时候$后面是router！
注意
查询参数的参数会显示在地址栏(/home？User=david)，params传递的参数不会显示在地址栏中。因为动态路由也传递参数，所以path不能在此中与参数一起使用。$router.push()方法，否则params将无效。我们也可以用这个。$router.replace()来实现页面跳转，如果我们需要用名称指定页面的话。两者的区别在于，push jump后可以通过浏览器的后退按钮返回原页面，而一旦使用replace jump就无法返回原页面。
补充：VUE实现从一个页面跳转到另一个页面的指定位置
比如点击网站首页，跳转到指定页面的底部。
主页
div @ click= toPath(/target page # target )
单击跳转/p
/div
方法：{
//单击跳转方法。
toPath(路径){
这个。$router.push({path: path})
}
}
跳转到页面目标页面
div class=location id=target
p指定位置/p
/div
//已安装
已安装(){
var hash=window . location . hash；
var index=hash . lastindexof( # )；
如果(索引！=-1) {
var id=hash.substring(index 1，hash . length 1)；
var div=document . getelementbyid(id)；
if (div) {
setTimeout(function () {
console.log($(div)。偏移量()。顶)；
$(html，body )。动画({scrollTop: $(div))。偏移量()。前43名，500名)
}, 500);
}
}
}
父母效能：d
总结
关于vue如何通过点击事件实现页面跳转的这篇文章到此为止。关于vue如何通过点击事件实现页面跳转的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。