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>