vue-router 跳转(自用)

本文详细介绍Vue中使用<router-link>组件和$router对象进行页面跳转的方法,包括不携带参数与携带参数的两种情况,以及如何利用replace特性避免历史记录。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、内置组件<router-link>

 1.1  to 进入用户页面,可按返回键返回值初始页面

   不携带参数 & 携带参数

// 不携带参数
<router-link :to="/user">用户</router-link> 

// 携带参数
<router-link :to="{path:'/user',query:{id:userId}}">用户</router-link>

​

1.2  replace进入用户页面,不会留下history,不可按返回键返回值初始页面

// 不携带参数
<router-link :to="/user" replace>用户</router-link> 

// 携带参数
<router-link :to="{path:'/user',query:{id:userId}}" replace>用户</router-link>

2、在javascript里进行页面跳转

    2.1 不携带参数 & 携带参数

// 不携带参数
this.$router.push('/user')

// 携带参数
this.$router.push({
  name: 'uesr',
  params: {
    id: userId
  }
})

2.2   replace功能,push 替换成replace即可

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值