Vue3.0中使用路由进行跳转和传参以及取值

1、在vue2.0中的路由跳转 2、2.在vue2.0中取出路由的传值

vue3.0中取消了vue2.0的部分api,新增的两个API,分别是useRouter和useRoute。

 3、vue3.0中路由跳转

 1)第一步先引入import {useRouter} from 'vue-router';

2)第二步 const router = useRouter();

 3)第三步 router.push({path:'/home', query:{id:'12' }})

4、vue3.0如何取出路由的值 

 1)第一步先引入import {useRoute} from 'vue-router';

 2)第二步 const route = useRoute();

 3)第三步route.query.id


————————————————
版权声明:本文为CSDN博主「前端菜菜DayDayUp」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_48594833/article/details/126619166

Vue 3 结合 TypeScript 使用时,页面跳转并传递参数通常会涉及到路由配置和组件间的通信。以下是基本步骤: 1. 安装依赖: 首先,确保已经安装了 Vue Router 和 Vue 的 TypeScript 插件,可以使用 `vue-router` 和 `vue-class-component` 或者 `@vue/cli-plugin-typescript`。 2. 路由配置: 在 `src/router/index.ts` 文件里,创建一个包含动态参数的路由: ```typescript import { createRouter } from 'vue-router'; import Home from '@/views/Home.vue'; const routes = [ { path: '/detail/:id', // 动态路由id 是参数名 name: 'Detail', component: Home, props: true, // 允许通过 route 的 params、query 或 meta 来向组件传递数据 }, ]; const router = createRouter({ mode: 'history', // 根据需求选择浏览器兼容模式 base: process.env.BASE_URL, routes, }); export default router; ``` 3. 组件接收参数: 在 `Home.vue` 或其他需要接收参数的组件使用 `<router-view>` 并使用 `props` 注解: ```typescript import { Component, Prop } from 'vue-property-decorator'; @Component export default class Home extends Vue { @Prop(String) id!: string; // 在这里声明接受字符串类型的 id 参数 mounted() { console.log('Received parameter:', this.id); // 这里可以进行进一步的操作,比如根据 id 调用 API 获取详情 } } ``` 4. 跳转传参: 在导航到这个组件的地方,如点击事件或某个函数,你可以这样调用: ```typescript import { useRouter } from 'vue-router'; export default { methods: { goToDetail(id: string) { const router = useRouter(); router.push(`/detail/${id}`); }, }, }; // 然后在模板里触发跳转,例如按钮点击事件: <button @click="goToDetail('your-param')">跳转到详细页</button> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值