vue router路由跳转,vue router route
本文主要介绍Vue3如何利用vue-router实现路由跳转和参数获取，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue-router实现路由跳转和参数获取路由跳转和参数传输路由跳转的三种方法总结，I、I、II、II、III、III
vue-router实现路由跳转与参数获取
路由跳转和传参
从“vue”导入{ defineComponent，onMounted，reactive，readonly，ref }；
从“vue-router”导入{ useRouter，user oute }；
导出默认定义组件({
名称：登录，
setup() {
const router=useRouter()，route=user oute()；
const submitForm=()={
formRef.value？验证((有效)={
如果(有效){
登录({策略：本地，规则形式})。然后((res: any)={
//获取参数和路由跳转
const redirect:string=route . query route . query . redirect；
如果(重定向){
router.replace(重定向)；
}否则{
router . push(/home )；
}
返回true
})。catch((e)={
.
});
}否则{
.
返回false
}
});
};
返回{.submit form }；
}
});
路由跳转三种方法的总结
一、第一种
1.路线设置方法
{ `在此插入代码片
路径：“/detail/:id”，
名称：详细信息，
meta: { keepAlive: true }，
组件：()=导入(./页面/详细信息/索引’)
}
2.路由跳转模式
这个。$router.push(
{
路径：`/detail/1
}
)
3.获取参数的方法
让detailId=this。$route.params.id
注意：params传输相当于路由的一部分，是必须传输的东西。验证后，未传输的页面将跳转到空白页。
以这种方式刷新页面id不会丢失。
二、第二种
1.路线设置方法
{
路径：“/detail/:id”，
名称：详细信息，
meta: { keepAlive: true }，
组件：()=导入(./页面/详细信息/索引’)
}
2.路由跳转模式
这个。$router.push(
{
名称：详细信息，
参数：{
编号
}
}
)
3.获取参数的方法
让detailId=this。$route.params.id
注意：这种方式的id可以通过，也可以不通过，不通过会丢失页面id。
以这种方式刷新页面id不会丢失。
三、第三种
1.路线设置方法
{
路径：“/detail”，
名称：详细信息，
meta: { keepAlive: true }，
组件：()=导入(./页面/详细信息/索引’)
}
2.路由跳转模式
这个。$router.push(
{
路径：“详细信息”，
查询：{
编号
}
}
)
3.获取参数的方法
让detailId=this。$route.query.id
注意：这种路由设置方式中的id是不能写的，因为写是路由器的一部分，所以不会匹配，刷新这种方式也不会丢失页面id。
http://localhost:8080/#/detail？id=1
总结： params一旦在路由中设置，params就是路由的一部分。如果此路由有params传输参数，但在跳转过程中没有传输此参数，跳转将失败或页面没有内容。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。