本篇内容主要讲解“vue怎么通过点击事件实现页面跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么通过点击事件实现页面跳转”吧!
1.首先我们要定义一个点击事件
2.在定义事件中调用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中定义的path
this.$router.push({path:'/home'});
参数为路由命名
// 对应router目录下index.js中定义的name
this.$router.push({name:'Home'});
带传递参数
// params里面放置的是我们要传递过去的参数
this.$router.push({name:'Home',params:{user:'david'}});
带查询参数
// 带查询参数,传递过去的内容会自动拼接变成/home?user=david
this.$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怎么通过点击事件实现页面跳转”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。