彻底搞清楚路由传参

路由传参主要使用两种方式：query和params

使用query传参时 配置使用path 或者name 跳转都可以

使用params传参时，路由规则需要参数占位，只能使用命名路由的name属性进行跳转

如果需要通过组件props形式接收参数 路由配置需要props属性或props函数返回参数

以下都是以声明式导航为例

<script setup lang="ts">
import { RouterView } from 'vue-router';
</script>

<template>
    <!-- 采用声明式导航为例 使用query传参，可以通过name属性跳转，也可以通过path跳转-->
    <!-- 跳转新闻页 -->
    <RouterLink to="/">
    新闻
    </RouterLink>
    <!-- 跳转关于页面query携带参数跳转 -->
    <RouterLink :to="{
        // path: '/about',
        name:'guanyu',
        query: {
            id: '1111',
            name: '王小五'
        }
    }">
    关于我
    </RouterLink>
    <!-- 跳转主页 params携带参数跳转 params 传参 只能配置命名路由的name属性-->
    <RouterLink :to="{        
        name:'zhuye',
        params: {
            id: '2222',
            name: '李小龙'
        }
    }">
    关于我
    </RouterLink>
   
    <RouterView />
</template>

 参数接收方式

//About.vue组件
<template>
    <div> {{route.query.id}}---{{route.query.name}}</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
const route=useRoute()
</script>
//Home.vue组件
<template>
    <div> {{route.params.id}}---{{route.params.name}}</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
const route=useRoute()
</script>

路由配置文件如下 router/index.ts 

import { createRouter, createWebHashHistory } from "vue-router";
import News from '@/views/News.vue'
import About from '@/views/About.vue'
import Home from "@/views/Home.vue";

const router=createRouter({
    history:createWebHashHistory(),
    routes:[        
        {
            path:'/',//新闻页
            component:News
        },
        {
            name:'zhuye',//主页
            path:'/home/:id/:name',//params传参需要进行参数占位
            component:Home,
            // props:true
        },
        {
            name:'guanyu',//关于
            path:'/about',
            component:About,
            //使用query传参须配置props函数才能在路由组件中通过props接收参数
            // props(route){
            //     return route.query
            // }
        }
        
    ]

})
export default router

页面效果如图

about

主页效果如图

如果想通过组件props接收路由上的参数可以在路由配置中增加props:true来配合params传参，

如果路由通过query传递参数，组件props接收参数，可以配置props函数来返回参数如下代码

import { createRouter, createWebHashHistory } from "vue-router";

import News from '@/views/News.vue'
import About from '@/views/About.vue'
import Home from "@/views/Home.vue";

const router=createRouter({
    history:createWebHashHistory(),
    routes:[        
        {
            path:'/',//新闻页
            component:News
        },
        {
            name:'zhuye',//主页
            path:'/home/:id/:name',//params传参需要进行参数占位
            component:Home,
            props:true//开启=================================
        },
        {
            name:'guanyu',//关于
            path:'/about',
            component:About,
            //使用query传参须配置props函数才能在路由组件中通过props接收参数
            props(route){
                return route.query
            }
        }
        
    ]

})
export default router

//About.vue组件
//路由通过params传递参数
<template>
    <div>关于 {{id}}---{{name}}</div>
</template>
<script lang="ts" setup>
defineProps(['id','name'])
</script>
//Home.vue组件
//路由通过query传参
<template>

    <div> 主页{{id}}---{{name}}</div>
</template>
<script lang="ts" setup>
defineProps(['id','name'])
</script>

 页面效果如下