Vue点击按钮跳转页面的实现方法

最新推荐文章于 2024-08-22 11:20:22 发布
最新推荐文章于 2024-08-22 11:20:22 发布
阅读量2.4w 收藏 66
点赞数 10
分类专栏： Vue Web 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27474555/article/details/105890401
版权

1、跳转外部链接并覆盖当前页
<el-button type="primary" @click="cimsInputClick">应用入口</el-button>
cimsInputClick () {
      window.location.href = 'https:\\www.mscims.com'
    }
2、跳转不覆盖当前页面，在新窗口打开
<el-button type="primary" @click="cimsInputClick">应用入口</el-button>
cimsInputClick () {
      window.open('https:\\www.mscims.com', '_blank')
    }
3、页面中内部跳转
用this.$router.push()实现。

大浪淘沙胡
关注
专栏目录
Vue 如何实现页面之间的跳转
weixin_47619153的博客
06-23 813
一、在template模板中添加button按钮加入click事件 <el-button @click="func()" type="text" size="small" >柱状图分析</el-button> 这里需要注意只有一个根节点的问题 <template> <el-button @click="func()" type="text" size="small" >柱状图分析</el-button> <tem
vue点击按钮实现简单页面的切换
12-28
本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> [removed][removed] </head> <body> 首页 新闻页 <h3 v-show=ta
vue 实现点击跳转页面
最新发布
cnzzs的博客
08-22 659
在Vue中实现点击跳转页面，通常有两种常见的方式：使用<router-link>组件和编程式导航。下面分别介绍这两种方法。使用<router-link>组件<router-link>是Vue Router提供的组件，用于创建链接，激活时可以自动添加CSS类，处理活性状态，并且支持 &lt...
vue点击按钮跳转页面
sun13047140038的博客
10-30 9579
在Vue.js中，你可以使用<router-link>或this.$router.push()来实现点击按钮跳转页面的功能，前提是你已经配置了Vue Router。在这个示例中，当用户点击按钮时，redirectToDestination 方法将通过this.$router.push()来触发页面跳转。你还可以在Vue组件的方法中使用this.$router.push()来实现页面跳转。-- 使用 router-link 创建按钮 -->-- 使用按钮触发页面跳转 -->
vue点击按钮跳转到另外一个页面
weixin_43719616的博客
04-12 1万+
长期不用都忘了，今天记录一下下。 1. 2. 3. 4. over
vue点击按钮实现跳转到另一个vue页面
changyana的博客
10-11 2万+
首先需要对按钮绑定一个函数，然后在函数里进行页面路由的改变。这里要确保项目中已经在使用vue-router。
vue跳转页面的几种方法(推荐)
12-28
vue跳转不同页面的多种方法 1：router-link跳转 <!-- 直接跳转 --> <button>点击跳转2</button> <!-- 带参数跳转 --> <button>点击跳转1</button> <button>...
vue页面跳转后返回原页面初始位置方法
11-28
在Vue.js应用中，当用户从一个页面跳转到另一个页面，然后按返回按钮返回原始页面时，通常希望用户能够回到他们离开时的位置。要实现这个功能，我们可以利用Vue的生命周期钩子、Vuex状态管理器以及Vue Router的特性...
vue实现点击按钮下载文件功能
10-16
具体实现方法如下： 1. 使用`<el-link>`包裹`<el-button>`，`<el-link>`的`href`属性绑定文件的URL。 2. `<el-link>`的`download`属性可以设置下载文件的默认文件名。 3. 在`<el-button>`的点击事件中，使用Vue的...
vue点击按钮跳转页面并且获取到当前这条数据的id 在跳转到的页面接收这个id...
weixin_42575505的博客
01-06 1637
可以在按钮的点击事件处理函数中使用 router.push 方法来跳转页面，在跳转时将数据的 id 作为参数传递。然后在跳转到的页面中，可以使用路由对象的 $route.params 属性来获取这个 id。 示例代码如下： <template> <div> <button @click="goToPage(item.id)">跳转</butto...
实现：Vue点击按钮，跳转到新的页面。
ftz123666的博客
07-10 8289
第一种方法：routerLink标签-添加target=
vue 点击按钮 路由跳转指定页面
热门推荐
小羽向前跑
02-12 8万+
最终效果： 点击指定按钮，跳转指定 /login 页面 代码： &lt;button @click="gotolink" class="btn btn-success"&gt;点击跳转页面&lt;/button&gt; methods:{ gotolink(){ //点击跳转至上次浏览页面 // this.$router.g...
Vue页面跳转
xuan__xia的博客
09-15 2790
(根据自己文件路径进行调整)
vue点击按钮实现页面跳转
qq_45525848的博客
03-07 5031
vue点击按钮实现页面跳转
vue如何从一个页面点击按钮跳转到另外一个页面
minibrid的分享页
07-05 3万+
目的： A页面 -- 点击按钮btn ---> B页面 通过改写路由的方式实现：btn的click函数如下： btnClick() { const vm = this; vm.$route.push({name: '路由名称', params: { id: 10 }}) } ...
vue点击按钮实现跳转页面
09-07
要实现在Vue中点击按钮跳转页面，你可以按照以下步骤进行操作： 1. 首先，在按钮上添加点击事件。你可以使用`@click`指令来监听按钮的点击事件。例如，你可以这样写： ```html <button @click="register">登录</button> ``` 这样，当按钮被点击时，会触发名为`register`的方法。 2. 在Vue组件的`methods`中定义`register`方法。在这个方法中，你可以使用`this.$router.push()`来实现页面跳转。例如，你可以这样写： ```javascript methods: { register() { this.$router.push('/detail') } } ``` 这里的`'/detail'`是跳转的目标路径，你可以根据实际需要修改。 3. 最后，在Vue组件中引入`router`，并将路由配置和组件关联起来。你可以在Vue实例中使用`VueRouter`创建路由实例，并将其作为选项传递给Vue实例。例如，你可以这样写： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Detail from './Detail.vue' Vue.use(VueRouter) const routes = [ { path: '/detail', component: Detail } ] const router = new VueRouter({ routes }) new Vue({ router }).$mount('#app') ``` 这里的`Detail`是你要跳转到的页面组件，你可以根据实际情况进行修改。 这样，当你点击按钮时，就会跳转到指定的页面。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大浪淘沙胡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值