vue怎么通过点击事件实现页面跳转

本篇内容主要讲解“vue怎么通过点击事件实现页面跳转”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么通过点击事件实现页面跳转”吧!

this.$router.push()

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,
    },
 ]
})

this.$router.push()中的参数规则

参数为字符串，即路径名称

//  路径/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怎么通过点击事件实现页面跳转”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！