Vue 路由跳转

已于 2022-05-17 18:40:52 修改
阅读量230 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-05-17 17:52:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaomazhuli/article/details/124826637
版权

1.query传参：会把参数拼接在url上


//根据path跳转
this.$router.push({path:'/home',query:{goodsId:'11122'}})

//根据name跳转
this.$router.push({name:'/home',query:{goodsId:'11122'}})

2.params传参：不会把参数拼接在url上

//params传参只能用name跳转
this.$router.push({name:'home',params: {goodsId:'11122'}})

3.不传参

//直接写地址
this.$router.push('/home')

//用name做跳转
this.$router.push({name:'home'})

//用path做跳转
this.$router.push({path:'/home'})

要注意的是传的参数是一个对象，需要有：key和value

xiaomazhuli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 路由跳转至外界页面
永远年轻
09-17 6095
用法 如果使用路由是在 vue 页面中来回跳转，可以使用 this.$router.push() 实现，但是如果想用这种方法跳转到外部链接就会报错，因为外部页面中是存在 HTTP 等前缀的。 解决办法: 1. 在 data 中定义好要跳转的外部链接 data() { return { url: 'http://www.baidu.com' } } 2. 按钮中创建单击事件 <button @click='routeClick(url)'></button> 3. 函数实现
vue利用a标签跳转页面 出现 `http://xxxxxx/about#/about` 问题原因和解决方法
lazy_tomato的博客
05-01 1万+
START 前段时间有小伙伴在vue项目中，路由跳转的时候，使用a标签去跳转路由，遇到跳转不生效，路径还是奇怪的http://xxxxxx/about#/about，记录一下这个问题。 a标签基本介绍 首先看看我们的a标签<a></a>的W3C基本介绍： <a>标签定义超链接，用于从一个页面链接到另一个页面; <a>元素最重要的属性是 href 属性，它指定链接的目标 href属性可以设置的URL: 绝对 URL - 指向另一个站点（比如 href=
vue路由跳转方式
weixin_44805161的博客
08-21 532
原文地址：https://www.cnblogs.com/miluluyo/p/11190648.html vue路由跳转有四种方式 router-link this.$router.push() (函数里面调用) this.$router.replace() (用法同push) this.$router.go(n) 1. 不带参     1.1 router-link <router-link :to="{name:'home'}"> <r
this.$router.push(),路由传值 跳转到不同的url地址
爬楼梯的前端小白的博客
03-07 1439
this.$router.push(),路由传值 跳转到不同的url地址
vue跳转网页的两种方式
qq_43537987的博客
06-26 3万+
网页跳转的两种方式 使用a标签（<router-link>）方式跳转 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-s...
vue路由跳转时判断用户是否登录功能的实现
08-29
"vue路由跳转时判断用户是否登录功能的实现" 这篇文章主要讲解了如何在 Vue 中实现路由跳转时判断用户是否登录的功能。下面我们将详细讲解该功能的实现步骤： Step 1: 使用 Vuex 管理用户登录状态 在实现用户登录...
Vue路由跳转问题记录详解
08-30
在本文中，我们将深入探讨一个具体的Vue路由跳转问题，以及如何解决这个问题。 首先，我们要了解Vue Router的基本结构。在示例中，我们看到这样的路由配置： ```javascript { path: '/tab', component: Tab, ...
vue路由跳转传递参数的方式总结
10-15
本文将详细介绍Vue路由跳转时传递参数的三种主要方式，并分析它们的特点和适用场景。 1. 动态路由传参 动态路由是一种在路由路径中包含动态段的方法，通常用于表示具有唯一标识的数据项。在路由配置文件中，我们...
详解vue 路由跳转四种方式 (带参数)
10-17
主要介绍了vue 路由跳转四种方式 (带参数)，本文通过实例代码给大家介绍的详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue跳转页面常用的几种方法
热门推荐
宋文轩
07-09 9万+
vue跳转页面有好几种不同方法，下面将通过实例代码给大家介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。 1：router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始；如果不带'/'，则从当前路由开始。 2.带p
修改vue自动跳转网页到http://0.0.0.0:8080/
qq_50729588的博客
07-22 815
自动跳转网页
vue中通过路由跳转的三种方式
qq_40072782的博客
04-01 8万+
router-view 实现路由内容的地方，引入组件时写到需要引入的地方 需要注意的是，使用vue-router控制路由则必须router-view作为容器。 通过路由跳转的三种方式 1、router-link 【实现跳转最简单的方法】 &amp;amp;lt;router-link to='需要跳转到的页面的路径&amp;amp;gt; 浏览器在解析时，将它解析成一个类似于&amp;amp;lt;a&amp;amp;gt; 的
router跳转外部链接
初来乍到是弟弟的博客
05-09 3714
项目场景： 提示：这里简述项目相关背景： 最近在帮老师弄程序，vue前端框架，大屏展示部分。 问题描述 提示：这里描述项目中遇到的问题： 今天记录一个问题，在router中如何跳转外部链接，一开始只想着能跳转本地路由，后来老师要求跳外部链接。 ```change(url) { this.$router.push({ path: url }); Bus.$emit("activeIndex", url); }, --- # 原因分析：
【Vue基础】Vue路由，实现页面跳转
qq_42294095的博客
05-23 6226
VueRouter、、
vue实现登录路由跳转到成功页面
一粒程序米
08-10 3万+
一. 效果 1.未登陆之前 2.登录界面 3.登录之后路由跳转 二.需求分析 要求： 使用vue-cli搭建 创建项目 密码输入框有 两个功能，当用户输入时候如果坚持caps lock处于开启状态。 右侧出现提示 caps lock is on 当用户点击右侧的眼睛图标的时候， 可以明文和密文的方式显示密码 页面的 组件可以使用 element-ui 5.点击login的时候 如果用户名或密码为空，需要把 对应的输入框变红，并且该输入框下方提示提示 用户名或密码不能为空 完成输入后
vue-router路由跳转的三种方式
海阔天空
12-24 2万+
vue-router路由跳转的三种方式
【Vue】路由的跳转、传参问题
weixin_43790653的博客
06-27 3269
【Vue】路由的跳转、传参问题
vue-router 跳转原理
weixin_30655569的博客
07-18 956
vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于,路由跳转不需要刷新整个页面。 大概流程可以看成: 　　1. 浏览器发出请求 　　2.服务器监听到端口有请求过来,并解析url路径 　　3.根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等) 　　4.浏览器根据数据包的 Content-type 来决定...
app.vue 跳转页面_小程序-实现小程序与小程序之间的跳转
weixin_39873456的博客
10-24 976
前言小程序与小程序之间互相可以跳转,形成流量的循环.在小程序中怎么实现的呢小程序中提供了两种方式实现小程序与小程序之间的跳转进入如我的页面即可体验小程序跳转使用 API 方式跳转如下示例代码所示<<view class="container"> <view bindtap="onJumpMin">打开跳转到其他小程序方式1</view> </vi...
vue 路由跳转
最新发布
05-30
Vue 路由跳转可以通过 Vue Router 实现。具体步骤如下： 1. 在 `router/index.js` 文件中定义路由： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 定义路由 const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值