本篇内容主要讲解“Vue怎么通过点击事件实现页面跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么通过点击事件实现页面跳转”吧!this.$router.push()首先我们要定义一个
本篇内容主要讲解“Vue怎么通过点击事件实现页面跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么通过点击事件实现页面跳转”吧!
首先我们要定义一个点击事件
在定义事件中调用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, }, ]})
参数为字符串,即路径名称
// 路径/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怎么通过点击事件实现页面跳转”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
--结束END--
本文标题: vue怎么通过点击事件实现页面跳转
本文链接: https://www.lsjlt.com/news/343145.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0