vue3 props路由

路由规则配置index.ts

第一种写法：将路由收到的所有params参数作为props传给路由组件

// 创建一个路由器，并暴露出去

// 引入路由器
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:[//路由匹配规则（路径对组件）
        {
            name:'zhuye',
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[{
                name:'xiang',
                path:"detail/:id/:title/:content", //传递的是params参数，参数占位要写
                component:Detail,
                // 第一种写法：将路由收到的所有params参数作为props传给路由组件
                props:true
                
            }]
        },
        {
            path:'/about',
            component:About
        },
    ]
})

export default router

第二种写法：函数写法，可以自己决定将什么作为props给路由组件

        {
            path:'/news',
            component:News,
            children:[{
                name:'xiang',
                path:"detail/:id/:title/:content",//params参数占位
                component:Detail,
                // 第二种写法：函数写法，可以自己决定将什么作为props给路由组件
                props(route) {
                    // 这里传的是params参数
                    return route.params
                },
                
            }]
        }

   {
      name:'xinwen',
      path:'/news',
      component:News,
      children:[
        {
          name:'xiang',
          path:'detail', // query参数不需要写占位
          component:Detail,
          // 第二种写法：函数写法，可以自己决定将什么作为props给路由组件
          props(route){
            // 这里传的是query参数
            return route.query
          }
        }
      ]
    },

切换页面News.vue

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">

        <!-- query传值 -->
        <RouterLink 
          :to="{
            name:'xiang',
            query:{
              id:news.id,
              title:news.title,
              content:news.content
            }
          }"
        >
          {{news.title}}
        </RouterLink>

        <!-- params传值 -->
        <RouterLink 
          :to="{
            name:'xiang', // params传值时，这里必须要用name属性跳转
            params:{
              id:news.id,
              title:news.title,
              content:news.content
            }
          }"
        >
          {{news.title}}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

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

  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
    {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
  ])

</script>

目标页Detail.vue

<template>
   <ul class="news-list">
    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>
  </ul>    
</template>
 

<script lang="ts" setup name="Detail">
// 用defineProps接收props路由参数
import { defineProps } from 'vue';
defineProps(['id','title','content'])
</script>

至此已成艺术。。