wordpress内页显示副标题,windows优化大师收费,长沙手机网站建设哪些,网站有后台更新不了Vue学习之——跳转路由
前情回顾
当我们进行点击修改时#xff0c;会进行跳转到修改页面#xff0c;为了完成回显数据#xff08;根据对应id查找#xff09;#xff0c;我们需要携带对应选择中的id跳转到修改页面#xff0c;让其进行查找回显
学习useRoute和useRoute…Vue学习之——跳转路由
前情回顾
当我们进行点击修改时会进行跳转到修改页面为了完成回显数据根据对应id查找我们需要携带对应选择中的id跳转到修改页面让其进行查找回显
学习useRoute和useRouter来自Vue-router官方库
useRoute用于接收参数
这个钩子用于返回当前路由的信息对象通常用于接收路由参数。通过useRoute你可以访问到如路由的name、path、params、query等属性。这相当于在Vue组件模板中使用$route。
useRouter用于跳转路由
该钩子返回当前的路由实例常用于实现路由跳转等操作。使用useRouter你可以进行如路由跳转router.push()、路由后退router.go(-1)等全局路由操作。这相当于在Vue组件模板中使用$router。
使用实战练习携带参数跳转修改页面
1.先在List展示表格的页面导入useRouter
import { useRouter } from vue-router;2.声明router
const router useRouter();3.写修改按钮的点击事件
3.1 template中通过插槽将对应行的数据接收为参数传给点击事件
template #defaultscopeel-button typeprimary sizemini clickhandleUpdate(scope.row)修改/el-button
/template3.2 点击事件进行传参并跳转路由 其中name是跳转页面的名字你在router里的index.ts中路由配置的name query是要传递的参数比如回显需要根据id查询对应的内容 const handleUpdate (row: any) {router.push({name: category-edit,query: { id: row.id },});
};4.在跳转过来的Edit页面导入useRoute
import { useRoute} from vue-route;5.声明route
const route useRoute();6.使用参数 我在onMounted中直接将路由携带的参数直接赋值给了我要直接通过id查询对应的内容的参数 onMounted(() {formData.id Number(route.query.id);callCategoryApi();
});其中formData是我要查询时传递的参数赋值过后callCategoryApi()是我要调用的查询数据的接口这样有了id就可以把对应内容回显出来了。
结果
