vue如何通过点击事件实现页面跳转详解

2024-09-30 18:24:40

前言

页面跳转，我们一般都通过路由跳转实现，通常情况下可直接使用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！！！

注意

query传参的参数会带在url后边展示在地址栏(/home?user=david)，params传参的参数不会展示到地址栏
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效，需要用name来指定页面
我们也可以用this.$router.replace()来实现页面跳转，二者的区别是push跳转之后可以通过浏览器的回退键回到原来的页面，而一旦使用replace跳转之后，无法回到原来页面

总结

到此这篇关于vue如何通过点击事件实现页面跳转的文章就介绍到这了,更多相关vue点击事件实现页面跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue-router跳转页面的方法

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p>  <
vue 点击按钮路由跳转指定页面的实现方式

目录点击按钮路由跳转指定页面最终效果 vue跳转页面常用的方式 1:router-link跳转 2:this.$router.push() 3.this.$router.replace() 4.this.$router.go(n) ps : 区别点击按钮路由跳转指定页面最终效果点击指定按钮,跳转指定 /login 页面代码: <button @click="gotolink" class="btn btn-success">点击跳转页面&
基于vue循环列表时点击跳转页面的方法

1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上
mpvue跳转页面及注意事项

下面先给大家介绍下mpvue跳转页面,具体内容如下所示: 正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路. 第一步就是配置环境之类的...附上官网的quickstart http://mpvue.com/mpvue/quickstart/ 相信看完官网的教程之后, 你的项目应该已经搭好了.下面说2个小问题的解决办法吧 1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧) build文件夹---
vue单页面实现当前页面刷新或跳转时提示保存

前言最近公司vue项目中有一个需求,需要在当前页面刷新或跳转时提示保存并可取消刷新,以防止填写的表单内容丢失.刚开始思考觉得很简单,直接在Router的钩子中判断就好了,但是会发现还有新的问题存在,浏览器刷新和当前页面关闭的时候无法监听,最终用window.onbeforeunload成功解决,所以用这篇文章简单记录下整个解决过程. vue-Router的钩子: 路由钩子可以分为全局的,单个路由独享的以及组件级别的,解决上述需求只用到了组件级别的路由钩子,所以本文只介绍组件级别的路由钩子,全局
vue跳转页面的几种方法(推荐)

vue跳转不同页面的多种方法 1:router-link跳转  <router-link to='/testDemo'> <button>点击跳转2</button> </router-link>  <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳
vue如何通过点击事件实现页面跳转详解

目录前言 this.$router.push() this.$router.push()中的参数规则参数的接收注意总结前言页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,但是如果我们想通过点击别的标签实现页面跳转,怎么办呢?这个时候我们就要用到this.$router.push()方法,下面来给大家简单介绍一下使用! this.$router.push() 1.首先我们要定义一个点击事件 2.在定义事件中调用this.$router.
Android中点击事件的四种写法详解

Android中点击事件的四种写法使用内部类实现点击事件使用匿名内部类实现点击事件让MainActivity实现View.OnClickListener接口通过布局文件中控件的属性第一种方法:使用内部类基本步骤如下: 1. 新建一个MyOnClickListener类并实现View.OnClickListener接口 2. 重写View.OnClickListener接口中的OnClick(View view)方法 3. 给Button绑定一个监听器,并监听一个点击事件示例代码如下
vue如何通过点击事件弹出弹窗页面详解

目录步骤一步骤二总结步骤一创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容: <template>   <el-dialog title="弹窗" :visible.syn
JQuery点击事件回到页面顶部效果的实现代码

JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo
vue绑定的点击事件阻止冒泡的实例

当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除.修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡.事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> doc
解决vue 绑定对象内点击事件失效问题

突然的发现某段 html 代码中点击事件失效了. 仔细观察才发现,这段代码内的元素都在 vue 绑定对象中. 因此失效. 解决办法是将绑定对象内的元素点击事件换成 v-on:click. 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
vue.js click点击事件获取当前元素对象的操作

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He
vue实现绑定事件的方法实例代码详解

一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法 <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第
antd Vue实现Login登录页面布局案例详解附带验证码验证功能

效果 Login页面  <template> <d
基于vue cli重构多页面脚手架过程详解

官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程步骤一改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

vue如何通过点击事件实现页面跳转详解

目录

前言

this.$router.push()

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

参数的接收

注意

总结

相关推荐

随机推荐