Vue router redirection and alias, routing component parameter passing
1. Redirection
3 ways
const routes = [
{
path:"/",
//重定向
//redirect:'/home'
//命名路由
//redirect:{name:"home"}
//方法
redirect:(to)=>{
return {
path:"home"}
}
},
{
name:'home',
path: '/home',
components: {
default:Home,
ShowMain,
ShowSide,
}
},
]
Two, alias
const routes=[
{
path:'/',
component:'Home',
alias:{
'father'}
}
]
3. Routing component passing parameters
3.1 router settings index.js
const routes=[
{
name:'user',
path: '/user/:id?',
component: User,
props:true,//开启
},
]
3.1 User.vue settings
<template>
<div>用户{
{
id}}</div>
</template>
<script setup>
import {
useRoute } from 'vue-router';
const id=useRoute().params.id
console.log("动态路由参数:",id)
const props=defineProps({
id:String})
console.log("props传参:",props.id)
</script>
content