Vue3 |
您所在的位置：网站首页 › kia7805p参数 › Vue3 |
|
概述
路由传参有query和params两种方式。 query以?形式传参，如 / user ? id=1 & name=tom & gender=male params通过:形式绑定参数传参，如 / user / :id / :name / :gender --> / user / 1 / tom / male 总结：路由传参用query或param都可以。一般采用params方式进行路由传参，其url比较美观。 1.定义路由 --routers/router.ts--> { path: '/test', //测试路由 name: 'test', component: () => import('~/views/test/index.vue'), meta: { title: '测试路由' } }, { path: '/user', //query定义路由 name: 'user', component: () => import('~/views/user/index.vue'), meta: { title: 'user页面' } }, // { // path: '/user/:id/:name/:age/:gender', //params定义路由(特殊，注意！！) // name: 'user', // component: () => import('~/views/pgc/user/index.vue'), // meta: { // title: 'user页面' // } // } 2.路由跳转 Test页面 query传参 params传参 3.接收参数 user页面接收参数 {{ query }} {{ params }} import { useRoute } from 'vue-router'; //1.先在需要跳转的页面引入useRouter const { query, params } = useRoute(); //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |