路由跳转和传参(vue3)

这篇具有很好参考价值的文章主要介绍了路由跳转和传参(vue3)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

路由跳转和传参(vue3+Ts+setup)

准备工作:安装了路由,配置了路由表,全局注册了路由

​ vue3路由官方文档

  1. 安装路由

npm

 npm install vue-router@4

yarn

 yarn add vue-router@4

路由跳转

  1. 首先在需要跳转的页面引入API---useRouter
 import { useRouter } from 'vue-router'
  1. 在跳转页面定义router变量
 //首先在setup中定义
  const router = useRouter()
router.push跳转页面(导航到不同的位置)
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
用router.replace(替换当前位置)
 
   它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。
   也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true
   
   router.push({ path: '/home', replace: true })
   // 相当于
   router.replace({ path: '/home' })
   
用router.go横跨历史
该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于 window.history.go(n)
// 向前移动一条记录,与 router.forward() 相同
router.go(1)

// 返回一条记录,与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)
值得一提的是,无论在创建路由器实例时传递什么样的 history 配置,Vue Router 的导航方法( push、replace、go )都能始终正常工作

路由传参

一.标签跳转页面

  1. template中跳转方式,直接$router.push()即可
template中跳转方式,直接router.push()即可
//如
<button @click="$router.push('mine')">跳转到个人中心</button>
  1. RouterLink 跳转页面(相当于a标签)
<RouterLink to="/home">home页面</RouterLink>
  1. RouterLink 跳转传参
如果你要传入参数的话,就得绑定动态to属性。

<router-link :to="{name:'home', params: {id:1}}">

 <router-link :to="{name:'/index',params:'我的'}">22</router-link>
 <router-link :to="{name:'/',params:'我的'}">11</router-link>
 <router-link :to="{name:'/father',params:'我的'}">33</router-link>
 <router-link :to="{name:'//teleport',params:'我的'}">44</router-link>
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

// html 取参 route.params.id
// script 赋值取参 route.params.id
这里判定to,然后采用name来跳转到指定页面。name值是你在路由配置中的name属性。

<router-link :to="{name:'home', query: {id:1}}">

// query传参数 (类似get,url后面会显示参数)
// 路由可不配置

// html 取参 route.query.id
// script 赋值取参 route.query.id

路由跳转的时候可以配置 name 、 path ,传参方式也有 params 、query 两种。
注:传参使用带R的const router = useRouter();取参使用不带R的const route = useRoute();

一. query 显式路由传参
1. function 跳转 传递参数1:显示传参 get /item?id=1
           setup() {
          			const router = useRouter();
          			let goBack = () =>{
          				router.push({path:'/item',query:{id:1}})
          		}
2. query 接收
//接收
<script setup>
	import { useRoute } from 'vue-router';
		const route = useRoute();
		console.log(route.query.id);
</script>

二. params 隐式路由传参

1. function跳转 传递参数2:隐式传参 post
setup() {
			const router = useRouter();
			let goBack = () =>{
				router.push({
					name:'item',
					params:{id:1}
				})
			}
			return {
				goBack
			};
		},
2. params 接收
// 接收
<script>
	import { useRoute } from 'vue-router';
	export default {
		setup(){
			const route = useRoute();
			console.log(route.params.id);
		}
	}
</script>

三.通过动态路由方式进行传参。

需要注意的是他是写在路由配置文件中的! router文件夹中的index.js文件中
{
    path: '/tiaozhn/:id',
    name: 'tiaozhn',
    component: tiaozhn//dizhi
  },

事件

function acty() {
				
			var id = 1;
			proxy.$router.push('/tiaozhn/' + id)
			
			}

接收

console.log(proxy.$route.params.id);

注意:页面传参需要注意的问题

1.如果提供了 pathparams 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

2.上述规则同样适用于 router-link 组件的 to 属性

3.如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息) 或者使用监听属性监听数据的变化文章来源地址https://www.toymoban.com/news/detail-686188.html

到了这里,关于路由跳转和传参(vue3)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue2第十七章】VueRouter 编程式导航跳转传参(点击按钮跳转路由和如何传递参数)

    如何在js进行跳转路由 在一些需求中,我们需要不用点击a标签或者router-link,但是也要实现路由跳转,比如登陆,点击按钮搜索跳转。那么这种情况如何进行跳转呢? 直接再按钮绑定的方法中写 this.$router.push(\\\'路由路径\\\') 即可。 代码示范 this.$router.push(\\\"/跳转路径\\\") 或者 this

    2024年02月09日
    浏览(43)
  • React V6路由跳转,跳转传参(params,search,state)

    注意:以下代码为个人笔记,不全,需自行调整,方可使用 公共跳转方法

    2024年02月11日
    浏览(44)
  • uniapp小程序路由跳转,使用uni.navigateBack方法,实现跳转传参

    由于小程序跳转限制10层,为了尽可能的减少页面栈,在小程序中会用到uni.navigateBack()方法,使用中难免会遇到页面跳转之间传参的问题。uni.navigateBack和uni.navigateTo、uni.redirectTo方式不同,不能通过路由拼接的方式传参,以下是三种跳转的方法: 在小程序中uni.navigateTo和u

    2024年02月16日
    浏览(61)
  • vue3路由跳转params传参接收不到

    这样路由可以跳转过去,但接收到了params是一个空对象 原因:由于之前的params传参在页面刷新之后,参数会丢失,所以vue将这种方法移除了。 vue推荐的路由跳转传参方法: 1.使用query传递参数 2.使用vuex、pinia对参数进行存储 3.使用 History API 方式传递和接收

    2024年02月09日
    浏览(47)
  • vue3路由跳转params传参接收不到?

    一、之前的用法 这样路由可以跳转过去,但接收到了params是一个空对象。 二、解决方法 通过查找资料,发现了原因。 https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 由于之前的params传参在页面刷新之后,参数会丢失,所以vue将这种方法移除了。 vue推荐的路

    2024年02月12日
    浏览(45)
  • 【vue3】在setup组合式api中不能使用beforeRouterEnter,监听来源路由和跳转的目标路由

    注意了,在vue3中的setup函数中是不可以使用beforeRouterEnter这个路由守卫的,请看vue-router的官方文档  导航守卫 | Vue Router 由此可见,在使用组合式api的时候,只有update和leave守卫,不符合我们的要求。 使用 script  setup/script这种形式的脚本,无法监听来源路由 方法一、我们可以

    2024年02月13日
    浏览(37)
  • vue3 的router跳转 - 页面同tab跳转和打开新tab跳转

    当前页需要的方法 主要是获得Vue Router实例暴露的一些方法,使用这些方法,进行路由操作 引入 调用 目标页需要的方法 主要是对传递来的参数,进行接收,比如查询参数,页面路径,标题,hash等 调用 route里面的数据会被处理成响应式 页面同tab跳转 push(to) :跳转到指定的路

    2024年02月01日
    浏览(44)
  • uniapp使用vue3语法利用uni.navigateTo跳转和接收参数

    官网利用vue3语法写uni.navigateTo跳转接参可能出现接收参数有问题的情况 ,获取上一个页面数据需要进行调整。         uni官网:uni.navigateTo(OBJECT) | uni-app官网 利用onload钩子3函数接收参数

    2024年02月02日
    浏览(40)
  • 微信小程序跳转传参的方法

    目的: 带着第一个页面的id,传到第二个页面,实现同一个页面,点击不同商品显示对应的数据 首先在第一个页面的js文件中写好接口 随后在wxml中写上点击事件,注意这个 data-id=\\\"{{item.id}}\\\" 随后在写上点击事件 先console一个e 看需要拿到什么数据  console的结果是 currentTarget下

    2024年02月06日
    浏览(53)
  • JS中跳转传参的几种方法

    在JavaScript中,页面跳转并传递参数主要有以下几种方法: 1. 使用URL的查询字符串 这是最常见的方法,你可以在URL后面添加查询字符串来传递参数。查询字符串以 ? 开始,参数之间用 分隔。 例如: 在接收页面,你可以使用 window.location.search 来获取查询字符串,然后解析它来

    2024年04月26日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包