路由传值以及路由守卫

路由守卫分为以下几种
全局守卫:beforeEach(是路由的钩子函数,在每一个路由跳转之前执行,常做登录权限判断,参数:to,from,next)
后置守卫:afterEach(在跳转之后执行,参数:to,from)
全局解析守卫:beforeResolve(参数:to,from,next。在beforeEach之后,afterEach之前)
路由独享守卫:beforeEnter
组内路由守卫:beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

to:Route – 即将要进入的目标 路由对象
from:Route – 当前导航正要离开的路由
next:Function – 一定要调用该方法来resolve这个狗子。执行效果依赖next方法的调用参数
next参数 --↓
next() // 直接进to所指路由
next(false)//中断当前路由
next(‘route’)//跳转指定路由
next(‘error’)//跳转错误路由
beforeResolve
router.beforeEach类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
beforeRouteLeave
离开该组件时调用
可以访问this
通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
beforeRouteUpdate
路由形态参数改变,组件被复用时调用(/user/1 => 1/user/2)

路由导航解析流程

路由导航开始
在当前路由调用beforeRouteLeave
调用beforeEach
在重用组建中调用beforeRouteUpdate
调用beforeEnter
解析异步路由组件
在呗激活的路由组件里调用beforeRouteEnter
调用beforeResolve
导航被确认
调用全局的afterEach
触发DOM更新

路由传值

1.父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数使用params传参的时候需要注意参数的名字,需要在路由表中做配置,如果不在路由中进行配置也可以进行传递,在router-link中设置也可以进行传递。在router-link中设置需要传递的参数:如果使用to+path(eg:to = ‘字符串’)进行跳转,需要传递的参数是必须在路由表中进行配置的(因为这一种只能对应路由表中的path);如果使用:to绑定一个对象传递参数,那么多余的参数可以不勇进行配置(这一种可以使name,对应路由表中的name),直接传递。在获取参数的时候用this.router.params进行获取。

this.router.push({
	name:"aa",
	params:{
		id:id
	}
})

对应路由配置:注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。

{
	path:"/aa",
	name:"aa",
	component:aa
}

另一种

this.$store.push({
	path:/aa/${id}
})

需要对应路由配置如下:

{
	path:"/aa/:id",
	name:"aa",
	component:aa
}

2.使用query传参,query中的参数直接在url中进行拼接(以?形式)
在获取参数的时候用this.store.query获取通过url中传递的参数

this.store.push({
	path:"/aa",
	query:{
		id:id
	}
})

路由表中应配置

{
	path:"/aa",
	name:"aa",
	component:aa
}

对应子组件:这样来获取参数
this.$route.query.id

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,路由传值可以通过路由参数、查询参数、动态路由等方式来实现。 1. 路由参数 路由参数是指在路由路径中定义的参数,例如 `/user/:id` 中的 `id` 就是一个路由参数。使用 `$route.params.id` 可以获取该参数的值,例如: ```javascript // 定义路由 { path: '/user/:id', component: User } // 获取路由参数 this.$router.push('/user/123') console.log(this.$route.params.id) // 输出 123 ``` 2. 查询参数 查询参数是指在URL中使用 `?` 传递的参数,例如 `/user?id=123` 中的 `id` 就是一个查询参数。使用 `$route.query.id` 可以获取该参数的值,例如: ```javascript // 获取查询参数 this.$router.push('/user?id=123') console.log(this.$route.query.id) // 输出 123 ``` 3. 动态路由 动态路由是指在路由路径中使用变量来定义路由,例如 `/user/:id` 中的 `id` 就是一个动态路由。使用 `$route.params.id` 可以获取该参数的值,例如: ```javascript // 定义路由 { path: '/user/:id', component: User } // 获取动态路由参数 this.$router.push('/user/123') console.log(this.$route.params.id) // 输出 123 ``` 除了以上三种方式,还可以使用状态管理工具(如 Vuex)来传递数据。 导航故障可能是由于路由配置错误、路由路径不匹配、组件不存在等原因引起的。建议检查路由配置是否正确、路径是否正确、组件是否正确引入等。同时也可以在路由钩子函数中进行调试,例如在 `beforeEach` 钩子函数中输出路由信息等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值