vue3+vite3（四）router路由query和params的区别

最新推荐文章于 2024-05-15 16:41:57 发布

在线小白www

最新推荐文章于 2024-05-15 16:41:57 发布

阅读量327

点赞数

分类专栏： vite Vue3 文章标签：前端

本文链接：https://blog.csdn.net/qq_43654065/article/details/127755755

版权

Vue3 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vite

9 篇文章 0 订阅

订阅专栏

都可以实现参数传递

1. query

地址栏：/about?id=1

配置：

//router.js
{
    path:'/about',
    name:'About',
    component:about
}

//home.vue
<router-link :to="{path:'about',query:{id:'1'}}"></router-link>

//about.vue
import {useRoute} form 'vue-router'

const route =useRoute()
console.log(route.query)

2. params

地址栏：/about/1

配置：

//router.js
{
    path:'/about/:id',
    name:'About',
    component:about
}

//home.vue
<router-link :to="{name:'about',params:{id:'1'}}"></router-link>

//about.vue
import {useRoute} form 'vue-router'

const route =useRoute()
console.log(route.params)