一、路由、子路由、动态路由
子路由、动态路由类似,不同的是子路由同时有路由跳转和页面跳转的,动态路由只有路由跳转,没有页面跳转
举例如下:/customerHome
下有 item1
和 item2
两个子路由。
import { createRouter, createMemoryHistory, RouteRecordRaw } from 'vue-router'; const routes: Array<RouteRecordRaw> = [ { path: '/customerHome', name: 'customerHome', component: CustomerHome, redirect: '/customerHome/item1/1', children: [ { path: 'item1/:id', name: 'item1', component: Item1 }, { path: 'item2', name: 'item2', component: Item2 } ] } ] // 创建 const router = createRouter({ history: createMemoryHistory(), routes }); // 暴露出去 export default router;
二、动态路由参数、路由查询参数
// 一、路由参数 import { useRouter } from 'vue-router'; const router = useRouter(); const goToPage = (url) => { // 当定义了动态路由时,可通过params传递动态路由参数 // 当需要传递查询参数时,可通过query传递 router.push({ name: url, params: { id: '1' },query: { userId: '123' } }); // customerHome/item/1 }; // 二、在跳转后的接收页面获取路由参数和查询参数 // 方式1:(推荐),路由页面通过props接收 props: { id: { type: String, default: '' }, userId: { type: String, default: '' } } // 方式2:通过引入useRoute获取 import { useRoute } from 'vue-router'; let id = route.params.id; // 1 let userId = route.query.userId; // 123
标签:参数,跳转,router,动态,id,路由 From: https://www.cnblogs.com/le-fang/p/17453319.html