vue router重定向和别名、路由组件传参

vue router重定向和别名、路由组件传参

一、重定向

3种方法

const routes = [
    {
    
    
        path:"/",
        //重定向
        //redirect:'/home'
        //命名路由
        //redirect:{name:"home"}
        //方法
        redirect:(to)=>{
    
    
            return {
    
    path:"home"}
        }
    },
    {
    
    
        name:'home',
        path: '/home',
        components: {
    
    
            default:Home,
            ShowMain,
            ShowSide,
        }
    },
 ]

二、别名

const routes=[
	{
    
    
		path:'/',
		component:'Home',
		alias:{
    
    'father'}
	}
]

三、路由组件传参

3.1 路由器设置 index.js

const routes=[
	{
    
     
        name:'user',
        path: '/user/:id?', 
        component: User,
        props:true,//开启
    },
]

3.1 User.vue设置

<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>

内容