Stories

Detail Return Return

vue3路由跳轉,普通路由和動態路由 - Stories Detail

vue3路由跳轉分兩種:
1、普通路由
2、動態路由

普通路由

  1. 無需在路由配置中聲明,可以隨意添加任意參數
  2. 參數以鍵值對的形式出現在 URL? 之後,用 & 分隔
  3. 例如:/user?id=123&name=John,其中 id=123name=Johnquery 參數
  4. 參數是可選的非必填項,可以自由傳遞

跳轉方式

const router = useRouter();

const onQuery = () => {
  let route = {
    path: "/test-common-route", // 跳轉路由
    query: {
      name: "SnowAdmin",
      text: "月之暗面"
    } // 路由參數
  };
  router.push(route);
};

動態路由

  1. 需要在路由配置中明確定義動態參數,否則參數會被忽略
  2. 參數會直接體現在 URL 路徑中,通常用於動態路由匹配
  3. 例如:/user/123,其中 123params 參數(對應路由 /user/:id
  4. 如果在路由配置中聲明瞭動態參數(如 /:id),則參數是必填

跳轉方式

const router = useRouter();

const onParams = () => {
  try {
    let route = {
      name: "test-dynamic-route", // 跳轉路由
      params: {
        name: "SnowAdmin",
        text: "月之暗面"
      } // 路由參數
    };
    router.push(route);
  } catch {
    arcoMessage("warning", "請完整填寫參數");
  }
};

Add a new Comments

Some HTML is okay.