Vue3使⽤vue-router如何实现路由跳转与参数获取⽬录
vue-router实现路由跳转与参数获取
路由跳转和传参
vue中reactive路由跳转三种⽅法的总结
⼀、第⼀种
⼆、第⼆种
三、第三种
vue-router实现路由跳转与参数获取
路由跳转和传参
import { defineComponent, onMounted, reactive, readonly, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
export default defineComponent({
name: 'Login',
setup() {
const router = useRouter(), route = useRoute();
const submitForm = () => {
formRef.value?.validate((valid) => {
if (valid) {
login({ strategy: 'local', ...ruleForm })
.then((res: any) => {
// 获取参数和路由跳转
const redirect: string = route.query && direct;
if (redirect) {
} else {
router.push('/home');
}
return true;
})
.catch((e) => {
...
});
} else {
.
..
return false;
}
});
};
return { ..., submitForm };
}
});
路由跳转三种⽅法的总结
⼀、第⼀种
1、路由设置⽅式
{`在这⾥插⼊代码⽚`
path: '/detail/:id',
name: 'detail',
meta: { keepAlive: true },
component: () => import('../pages/detail/index')
}
2、路由跳转模式
this.$router.push(
{
path: `/detail/1`
}
)
3、获取参数⽅式
let detailId = this.$route.params.id
注意： params 传参相当于是路由的⼀部分是必须传的东西，经过验证不传页⾯会跳转到空⽩页
该⽅式刷新页⾯id 不丢失
⼆、第⼆种
1、路由设置⽅式
{
path: '/detail/:id',
name: 'detail',
meta: { keepAlive: true },
component: () => import('../pages/detail/index')
}
2、路由跳转模式
this.$router.push(
{
name: 'Detail',
params: {
id
}
}
)
3、获取参数⽅式
let detailId = this.$route.params.id
注意：此⽅式传参路由设置⽅式中的 id 可以传也可以不传，不传刷新页⾯id 会丢失
该⽅式刷新页⾯id 不丢失
三、第三种
1、路由设置⽅式
{
path: '/detail',
name: 'detail',
meta: { keepAlive: true },
component: () => import('../pages/detail/index')
}
2、路由跳转模式
this.$router.push(
{
path: 'Detail',
query: {
id
}
}
)
3、获取参数⽅式
let detailId = this.$route.query.id
注意：此⽅式传参路由设置⽅式中的 id 不能写，因为写了就是router 的⼀部分，这样就会匹配不到, 此⽅式刷新页⾯id 不丢失
总结： params⼀旦设置在路由，params就是路由的⼀部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页⾯会没有内容。
以上为个⼈经验，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。