一、区别
let route = useRoute()
注意:
1、params参数可选可不选,参数占位后面+?
2、path占位符
3、使用name
二、案例
1、跳转
<template><ul><RouterLink :to="{name:'detail',params: news}" v-for="news in newList" :key="news.id">{{ news.name }}</RouterLink></ul><div><RouterView></RouterView></div> </template><script lang="ts" setup name="News">import { reactive } from "vue";import {RouterView, RouterLink} from 'vue-router'let newList = reactive([{id:'01', name:'小米', content:'小米汽车'},{id:'02', name:'理想', content:'大SUV'},{id:'03', name:'小鹏', content:'智驾汽车'}]) </script><style></style>
2、内容
<template><ul><li>新闻标题:{{ params.name }}</li><li>新闻内容:{{ params.content }}</li></ul> </template><script lang="ts" setup name="Detail">// useRoute Hooks import { toRefs } from 'vue' import {useRoute} from 'vue-router'let route = useRoute()let {params} = toRefs(route) </script><style></style>