本篇内容主要讲解“vue怎么通过点击事件实现页面跳转”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么通过点击事件实现页面跳转”吧!
this.$router.push()
首先我们要定义一个点击事件
在定义事件中调用this.$router.push()方法
<template> <button @click = "handle">点击跳转</button></template><script> export default{ methods:{ handle (){ // 路径/home对应我在router目录下index.js中定义的path属性值 this.$router.push('/home'); } } }</script>目标跳转页面路由在router目录下index.js定义如下：
export default new Router({ routes: [ { path: '/home', name:'Home', component: Home, }, ]})this.$router.push()中的参数规则
参数为字符串，即路径名称
// 路径/home对应router目录下index.js中定义的path属性值this.$router.push('/home');参数为对象
// 对应router目录下index.js中定义的paththis.$router.push({path:'/home'});参数为路由命名
// 对应router目录下index.js中定义的namethis.$router.push({name:'Home'});带传递参数
// params里面放置的是我们要传递过去的参数this.$router.push({name:'Home',params:{user:'david'}});带查询参数
// 带查询参数，传递过去的内容会自动拼接变成/home?user=davidthis.$router.push({path:'/home',query:{user:'david'}});参数的接收
当我们使用params进行传参时，只需在接收参数的地方使用this.$route.params进行接收即可
eg：
//传参this.$router.push({name:'Home',params:{user:'david'}});// 在name为Home的组件中接收参数const id=this.$route.params.id;console.log(this.$route.params);//打印结果为{user:'david'}当我们使用query传参时，只需在接收参数的地方使用this.$route.query进行接收即可，用法同上
！！！这里有一个小细节：$符号后面跟的是route不是router，跳转的时候 $后面跟的是router！！！
注意
query传参的参数会带在url后边展示在地址栏(/home?user=david)，params传参的参数不会展示到地址栏
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效，需要用name来指定页面
我们也可以用this.$router.replace()来实现页面跳转，二者的区别是push跳转之后可以通过浏览器的回退键回到原来的页面，而一旦使用replace跳转之后，无法回到原来页面
到此，相信大家对“vue怎么通过点击事件实现页面跳转”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
