[vue3]路由传参 query & params

Detail.vue

<template>
    <li>{{ id }}</li>
    <li>{{ title }}</li>
    <li>{{ content }}</li>

</template>

<script setup lang="ts" name="Detail">
    defineProps(['id','title','content'])
</script>

query

News.vue

<template>
    <div class="news"> 
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <RouterLink
                    :to="{
                        path:'/news/detail',
                        query:{ // 写你想传入的内容
                            id:news.id,
                            title:news.title,
                            content:news.content
                        }
                    }"
                >
                    {{ news.title }}
                </RouterLink>
            </li>
        </ul>

        <RouterView></RouterView>

    </div>
</template>

<script setup lang="ts" name="News">
    import {reactive} from 'vue'
    import {RouterLink} from 'vue-router'

    const newsList = reactive(
        [
            {id:'1', title:'title1', content:'content1'},
            {id:'2', title:'title2', content:'content2'},
            {id:'3', title:'title3', content:'content3'}
        ]
    )
</script>

index.ts

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

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

const router = createRouter ({
    history:createWebHistory(), // 路由器的工作模式
    routes:[ // 一个一个的路由规则
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[
                {
                    path:'detail',
                    component:Detail,
                    props(route) {
                        return route.query
                    }
                }
            ]
        },
        {
            path:'/about',
            component:About
        }
    ]
})

export default router

Params

index.ts

占位

                    path:'detail/:id/:title/:content',

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

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

const router = createRouter ({
    history:createWebHistory(), // 路由器的工作模式
    routes:[ // 一个一个的路由规则
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[
                {
                    name:'detail',
                    path:'detail/:id/:title/:content',
                    component:Detail,
                    props(route) {
                        return route.params
                    }
                }
            ]
        },
        {
            path:'/about',
            component:About
        }
    ]
})

export default router

news.vue

用name而不是path

                        name:'detail',

<template>
    <div class="news"> 
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <RouterLink
                    :to="{
                        name:'detail',
                        params:{
                            id:news.id,
                            title:news.title,
                            content:news.content,
                        }
                    }"
                >
                    {{ news.title }}
                </RouterLink>

            </li>
        </ul>

        <RouterView></RouterView>

    </div>
</template>

<script setup lang="ts" name="News">
import {reactive} from 'vue'
    import {RouterLink} from 'vue-router'

    const newsList = reactive(
        [
            {id:'1', title:'title1', content:'content1'},
            {id:'2', title:'title2', content:'content2'},
            {id:'3', title:'title3', content:'content3'}
        ]
    )
</script>