Vue router redirection and alias, routing component parameter passing

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