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>