history模式
vue2:mode:'history',
Vue3:history:createWebHistory()
hash模式
vue2:mode:'hash',
Vue3:history:createWebHashHistory()
to 的两种跳转模式
<RouterLink to="/index"> </RouterLink>
<RouterLink :to="{path:'/index'}"> </RouterLink>
<RouterLink :to="{name:'index'}"> </RouterLink>
编程式导航 js跳转 需要用到 useRouter(整个应用的路由器)
const router = useRouter()
router.push('/index') router.replace('/index')
router.push({
path:'/index',
query:{
id:值
})
路由传参
query参数
第一种写法
<RouterLink :to="`/inedx?id=${值}`"> </RouterLink>
第二种写法
<RouterLink
:to="{
path:'/index',
query:{
id:值
}
}">
</RouterLink>
params参数 只能用name跳转 值传输 得在path占位
<RouterLink
:to="{
name:'index',
params:{
id:值
}
}">
</RouterLink>
路由的 props配置
第一种写法
路由配置写了 props:true 在组件内可以使用 defineProps(['值']) 进行接收 只限params的值
第二种写法
props(route){
return route.query
}
在组件内可以使用 defineProps(['值']) 进行接收
replace属性 清除之前的路由缓存
<RouterLink replace to="/index"> </RouterLink>
路由重定向 redirect