vue页面跳转的三种方式

最新推荐文章于 2024-09-26 11:12:57 发布
最新推荐文章于 2024-09-26 11:12:57 发布
阅读量3.5k 收藏 11
点赞数 3
分类专栏： 杂记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_Brandy/article/details/105724702
版权

前言

页面跳转应该是每个项目都会遇到的，而传统的页面跳转一般是使用a标签来实现，那vue的页面跳转有什么方式呢？

vue页面跳转的方式

  1. a标签跳转

    vue的a标签跳转与传统的a标签跳转有一点区别，就是属性href的值，需要加上#，如 href="#/article/all"，如果没有#，则会跳转到首页
    在这里插入图片描述

  2. router-link跳转
    使用router-link标签跳转，如
    在这里插入图片描述

  3. 方法跳转
    给标签加个点击事件，在事件方法内进行跳转。如
    在这里插入图片描述
    在这里插入图片描述

区别

前两种方式表面看起来没有区别，但是使用router-link标签跳转性能更好，而第三种方式，是最不好用的，并且在样式上，当鼠标移到跳转的连接时，鼠标图标不会变成小手形状，让人感觉不到这是一个跳转连接

Fandy_meng
关注
专栏目录
vue router 的路由传参 params 和 query 的 区别
weixin_30588675的博客
09-05 2286
1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 &...
vue页面跳转实现页面缓存操作
10-15
本文将详细解释如何在Vue页面跳转过程中实现页面缓存，并结合业务场景进行阐述。 ### 业务需求分析 假设我们有一个Web应用，用户在A页面（例如：蓝色野区）执行了一些操作，然后跳转到B页面（红色野区）。当用户...
vue跳转页面的几种方法(推荐)
12-28
vue跳转不同页面的多种方法 1：router-link跳转 <!-- 直接跳转 --> <router to='/testDemo'> <button>点击跳转2</button> </router> <!-- 带参数跳转 --> <router to={path:> <button>点击跳转1</button> </router> <router to={name:> <button>点击
Vue3路由跳转与传参
最新发布
m0_62214280的博客
09-26 625
本文主要介绍vue3中组合式api实现路由跳转页面并传递参数，以及如何接收参数。
vue 实现点击跳转页面
qq_33240556的博客
07-11 2494
在Vue中实现点击跳转页面，通常有两种常见的方式：使用组件和编程式导航。下面分别介绍这两种方法。
vue 页面跳转
weixin_30375427的博客
01-05 281
一、在template中的常见写法： <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default">点击跳转</button> </router-link> 二、在js中设置跳转（在方法中跳转界面并传参，两种方式：params 与...
Vue页面跳转传递参数及接收方式
10-14
本文将详细介绍两种在Vue中实现页面跳转并传递参数的方法，以及如何接收这些参数。 首先，我们需要配置Vue Router，这是Vue.js的官方路由库，用于管理应用的导航。在`src/router/config.js`文件中，我们需要导入Vue...
Vue页面跳转动画效果的实现方法
10-17
百度了好久都没办法实现vue中一个页面跳到另一个页面，甚至到google上搜索也是没办法的，最终还是找了高人亲自指导，所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法，需要的朋友可以参考下
在vue中页面跳转有几种方法？
湖北太米网络科技有限公司
11-08 961
在 Vue 中，有几种方法可以实现页面跳转。以下是常用的几种方法：使用 <router-link> 组件：如果你使用了 Vue Router 来进行路由管理，可以使用 <router-link> 组件来创建带有路由的链接。例如：<router-link to="/about">About...
【前端】实现Vue组件页面跳转的多种方式
码农研究僧的博客
02-09 1万+
通过某个Button让页面多种方式跳转
vue跳转页面常用的几种方法
怯桦的博客
04-28 1万+
1、router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始；如果不带'/'，则从当前路由开始。 2.带params参数 <router-link :to="{name:'home', params: {id:123456}}"&g
vue-router跳转页面
weixin_34037515的博客
01-29 163
小结放在前：先祝大家新年快乐！鸡年大吉大利！在新的一年里大家都有跳跃般的成长！作为新年的第一篇文章，就拿他来给大家拜个年！！！文章前部份讲解了vue-router路由的配置，后半部分为去年的文章vue.js快速入门添加了两个知识点 props 和 $emit 组件间的通信，希望大家看完有所收获！！！ 使用 Vue.js 做项目的时...
vue项目页面跳转的常用方法
weixin_47356044的博客
04-28 6万+
1.页面跳转的几种方法 1：router-link跳转 2：this.$router.push() 3：this.$router.replace() 4：this.$router.go(n) 1. router-link跳转 通常用于点击 查看 按钮，跳转到其他页面 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name //
vue中跳转界面
bu_xiang_tutou的博客
05-10 7972
设置 name 和 path 可以使得路由的访问更加方便，同时可以提高代码的可读性和可维护性。// 使用 name 访问路由// 使用 path 访问路由。
vue跳转页面的几种常用方法
m0_70031574的博客
07-23 1万+
点击跳转5
vue跳转到其他页面
一只没有脚的鸟
07-11 3468
vue跳转到其他页面的几种方式介绍
Vue路由跳转的五种方式
热门推荐
stc_ljc的博客
12-23 13万+
Vue路由跳转的五种方式。1. router-link，2. this.$router.push()， 3. this.$router.replace()，4. this.$router.go(n)， 5. location
vue路由跳转的几种方式
06-20
Vue.js中的路由跳转主要有以下几种方式： 1. **`this.$router.push(path)`** 或 `this.$router.go(n)`：这是最常用的路由跳转方式，`push` 方法用于添加新的路由到浏览器历史记录，而 `go` 方法则用于改变当前路由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值