一、路由、子路由、動態路由

子路由、動態路由類似，不同的是子路由同時有路由跳轉和頁面跳轉的，動態路由只有路由跳轉，沒有頁面跳轉。

如下面路由：

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