VUE之参数传递

1、嵌套路由

路由嵌套 children里面的path属性不加/杠，可以参考如下代码：

>> router/index.ts

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

// 第一步：引入createRouter
import {createRouter,createWebHistory,createWebHashHistory} 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:createWebHashHistory(), //路由器的工作模式
    routes:[  //一个个路由规则
        {
            path:'/home',
            component: Home
        },
        {
            path:'/news',
            component: News,
            children:[
              {
                name: 'xiangqi',
                path:'detail',
                component:Detail
              }
            ]
        },
        {
            path:'/about',
            component: About
        },
    ]
})

export default router

2、query参数

>> pages/Detail.vue

<template>
    <ul class="news-list">
        <li>编号: {
  
  {query.id}}</li>
        <li>编号: {
  
  {query.title}}</li>
        <li>编号: {
  
  {query.content}}</li>
    </ul>
</template>

<script lang="ts" setup name="Detail">
 import { toRefs } from 'vue';
 import { useRoute } from 'vue-router';
 let route = useRoute()
 //从响应式解构，会丢失响应式
 let { query } = toRefs(route)
 console.log(query)

</script>

<style scoped>
  .news-list {
    list-style: none;
    padding-left: 20px;
  }
  .news-list>li{
    line-height:30px;
  }
</style>

2.1、方法一

>> pages/News.vue

<RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{
  
  {news.title}}</RouterLink>

<script setup lang="ts" name="News">
import { reactive } from 'vue';
import { RouterView,RouterLink } from 'vue-router';
const newList = reactive([
  {id:'dasfadadadad01',title:'很好的抗癌食物',content:'西蓝花'},
  {id:'dasfadadadad02',title:'如何一夜暴富',content:'学IT'},
  {id:'dasfadadadad03',title:'震惊万万没想到',content:'明天周一'},
  {id:'dasfadadadad04',title:'好消息',content:'快过年了'},
  ])


</script>

2.2、方法二

<RouterLink :to="{
            path:'/news/detail',
            query:{
               id:news.id,
               title:news.title,
               content:news.content
             }
            }">
              {
  
  { news.title }}
          </RouterLink>

2.3、方法三

<RouterLink :to="{
            name:'xiangqi',
            query:{
               id:news.id,
               title:news.title,
               content:news.content
             }
            }">
              {
  
  { news.title }}
          </RouterLink>

3、params参数

 

>> router/index.ts     
   {
            path:'/news',
            component: News,
            children:[
              {
                name: 'xiangqi',
                path:'detail/:id/:title/:content?', //用于params参数占位,加?号可传可不传
                // path:'detail',
                component:Detail
              }
            ]
        },

<template>
    <div class="news">
      <!--导航区-->
       <ul>
         <li v-for="news in newList" :key="news.id">
          <!--第一种写法-->
          <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{
  
  {news.title}}</RouterLink> -->
          <!--第二种写法-->
          <RouterLink 
            :to="{
               name:'xiangqi',
               params: {  //params不能传对象和数组
                 id:news.id,
                 title:news.title,
                 content:news.content
               }
            }">
                 {
  
  {news.title}}
          </RouterLink>
         
         </li>
       </ul>
       <!--展示区-->
       <div class="news-content">
        <RouterView/>
       </div>
    </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue';
import { RouterView,RouterLink } from 'vue-router';
const newList = reactive([
  {id:'dasfadadadad01',title:'很好的抗癌食物',content:'西蓝花'},
  {id:'dasfadadadad02',title:'如何一夜暴富',content:'学IT'},
  {id:'dasfadadadad03',title:'震惊万万没想到',content:'明天周一'},
  {id:'dasfadadadad04',title:'好消息',content:'快过年了'},
  ])

</script>