vue路由、子路由、动态路由、动态路由参数、路由查询参数

一、路由、子路由、动态路由

子路由、动态路由类似，不同的是子路由同时有路由跳转和页面跳转的，动态路由只有路由跳转，没有页面跳转。

如下面路由：

/customerHome 下有 item1 和 item2 两个子路由。

item1 下面有动态路由，如/customerHomeitem1/1/customerHome/item1/2。

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