亲宝软件园·资讯

展开

vue点击事件实现页面跳转

疯狂的小强呀 人气:0

前言

页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,但是如果我们想通过点击别的标签实现页面跳转,怎么办呢?这个时候我们就要用到this.$router.push()方法,下面来给大家简单介绍一下使用!

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!!!

注意

补充:VUE实现从一个页面跳转到另一个页面的指定位置

例如,从网站的首页点击跳转到指定页面的底部。

首页 home

<div @click="toPath('/targetPage#target')">
    <p>点击跳转</p>
</div>
methods:{
    //点击跳转方法
    toPath(path) {
        this.$router.push({path: path})
    }
}

跳转到的页面 targetPage

<div class="location" id="target">
    <p>指定位置</p>
</div>
//在mounted里
mounted() {
    var hash = window.location.hash;
    var index = hash.lastIndexOf("#");
    if (index != -1) {
       var id = hash.substring(index + 1, hash.length + 1);
       var div = document.getElementById(id);
       if (div) {
         setTimeout(function () {
           console.log($(div).offset().top);
           $('html, body').animate({scrollTop: $(div).offset().top - 43}, 500)
         }, 500);
       }
    }
}

亲测有效 :D

总结

加载全部内容

相关教程
猜你喜欢
用户评论