feat(h5): add backButton

packages/shims-uni-app.d.ts

@@ -38,7 +38,7 @@ declare namespace UniApp {
 
   interface UniRoute {
     path: string
-    redirect?: string
+    alias?: string
     meta: PageRouteMeta
     component?: any
   }

packages/uni-api/src/protocols/route/route.ts

@@ -133,9 +133,11 @@ function createNormalizeUrl(type: string) {
     url = getRealRoute(url)
     const pagePath = url.split('?')[0]
     // 匹配路由是否存在
-    const routeOptions = __uniRoutes.find(
-      ({ path, redirect }) => path === pagePath || redirect === pagePath
-    )
+    if (url === '/') {
+      // 首页
+      url = __uniRoutes[0].path
+    }
+    const routeOptions = __uniRoutes.find(({ path }) => path === pagePath)
 
     if (!routeOptions) {
       return 'page `' + url + '` is not found'

packages/uni-h5/dist/uni-h5.esm.js

@@ -757,32 +757,17 @@ function createRouterOptions() {
   return {
     history: initHistory(),
     strict: !!__uniConfig.router.strict,
-    routes: [
-      {path: __uniRoutes[0].path, redirect: "/"},
-      ...__uniRoutes
-    ],
+    routes: __uniRoutes,
     scrollBehavior
   };
 }
-function initGuard(router) {
-  router.beforeEach(beforeEach);
-  router.afterEach(afterEach);
-}
 function createAppRouter(router) {
-  initGuard(router);
   return router;
 }
 function initHistory() {
   const history2 = __UNI_FEATURE_ROUTER_MODE__ === "history" ? createWebHistory() : createWebHashHistory();
   return history2;
 }
-const beforeEach = (to, from, next) => {
-  next();
-};
-const afterEach = (to, from, failure) => {
-  console.log("afterEach.id", history.state.__id__);
-  console.log("afterEach", to, from, failure, JSON.stringify(history.state));
-};
 var TabBar = /* @__PURE__ */ defineComponent({
   name: "TabBar"
 });
@@ -912,7 +897,7 @@ function initPublicPage(route) {
   return {
     id,
     path: route.path,
-    route: normalizeRoute(route.meta.route || route.path),
+    route: normalizeRoute(route.path),
     fullPath: route.meta.isEntry ? route.meta.pagePath : route.fullPath,
     options: {},
     meta: usePageMeta()
@@ -8182,7 +8167,10 @@ function createNormalizeUrl(type) {
   return function normalizeUrl(url, params) {
     url = getRealRoute(url);
     const pagePath = url.split("?")[0];
-    const routeOptions = __uniRoutes.find(({path, redirect}) => path === pagePath || redirect === pagePath);
+    if (url === "/") {
+      url = __uniRoutes[0].path;
+    }
+    const routeOptions = __uniRoutes.find(({path}) => path === pagePath);
     if (!routeOptions) {
       return "page `" + url + "` is not found";
     }
@@ -8378,27 +8366,25 @@ const navigateBack = defineAsyncApi(API_NAVIGATE_BACK, (options) => {
   }
   getApp().$router.go(-options.delta);
 }, NavigateBackProtocol, NavigateBackOptions);
-const navigateTo = defineAsyncApi(API_NAVIGATE_TO, (options, callback) => {
+function navigate(type, url, callback) {
   const router = getApp().$router;
-  router.push({
-    path: options.url,
+  router[type === "navigateTo" ? "push" : "replace"]({
+    path: url,
     force: true,
-    state: createPageState("navigateTo")
+    state: createPageState(type)
   }).then((failure) => {
     if (isNavigationFailure(failure)) {
       return callback({
-        errMsg: `${API_NAVIGATE_TO}:fail ${failure.message}`
+        errMsg: `:fail ${failure.message}`
       });
     }
     callback();
   });
-}, NavigateToProtocol, NavigateToOptions);
-const redirectTo = defineAsyncApi(API_REDIRECT_TO, () => {
-}, RedirectToProtocol, RedirectToOptions);
-const reLaunch = defineAsyncApi(API_RE_LAUNCH, () => {
-}, ReLaunchProtocol, ReLaunchOptions);
-const switchTab = defineAsyncApi(API_SWITCH_TAB, () => {
-}, SwitchTabProtocol, SwitchTabOptions);
+}
+const navigateTo = defineAsyncApi(API_NAVIGATE_TO, (options, callback) => navigate(API_NAVIGATE_TO, options.url, callback), NavigateToProtocol, NavigateToOptions);
+const redirectTo = defineAsyncApi(API_REDIRECT_TO, (options, callback) => navigate(API_REDIRECT_TO, options.url, callback), RedirectToProtocol, RedirectToOptions);
+const reLaunch = defineAsyncApi(API_RE_LAUNCH, (options, callback) => navigate(API_RE_LAUNCH, options.url, callback), ReLaunchProtocol, ReLaunchOptions);
+const switchTab = defineAsyncApi(API_SWITCH_TAB, (options, callback) => navigate(API_SWITCH_TAB, options.url, callback), SwitchTabProtocol, SwitchTabOptions);
 var api = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
@@ -8570,8 +8556,9 @@ var PageHead = /* @__PURE__ */ defineComponent({
 function createBackButtonTsx(navigationBar) {
   if (navigationBar.backButton) {
     return createVNode("div", {
-      class: "uni-page-head-btn"
-    }, [createSvgIconVNode(ICON_PATH_BACK, navigationBar.type === "transparent" ? "#fff" : navigationBar.titleColor, 27)]);
+      class: "uni-page-head-btn",
+      onClick: onPageHeadBackButton
+    }, [createSvgIconVNode(ICON_PATH_BACK, navigationBar.type === "transparent" ? "#fff" : navigationBar.titleColor, 27)], 8, ["onClick"]);
   }
 }
 function createButtonsTsx(btns) {
@@ -8667,6 +8654,17 @@ function createPageHeadSearchInputTsx(navigationBar, {
     onInput
   }, null, 8, ["focus", "disabled", "style", "placeholder-style", "onFocus", "onBlur", "onInput"])], 4);
 }
+function onPageHeadBackButton() {
+  if (getCurrentPages().length === 1) {
+    uni.reLaunch({
+      url: "/"
+    });
+  } else {
+    uni.navigateBack({
+      from: "backbutton"
+    });
+  }
+}
 function usePageHead(navigationBar) {
   const clazz = computed(() => {
     const {

packages/uni-h5/src/framework/components/page/pageHead.tsx

@@ -45,7 +45,6 @@ export default /*#__PURE__*/ defineComponent({
       usePageHeadSearchInput(navigationBar)) as PageHeadSearchInput
     __UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__ &&
       usePageHeadTransparent(headRef, navigationBar)
-
     return () => {
       // 单页面无需back按钮
       const backButtonTsx = __UNI_FEATURE_PAGES__
@@ -86,7 +85,7 @@ export default /*#__PURE__*/ defineComponent({
 function createBackButtonTsx(navigationBar: UniApp.PageNavigationBar) {
   if (navigationBar.backButton) {
     return (
-      <div class="uni-page-head-btn">
+      <div class="uni-page-head-btn" onClick={onPageHeadBackButton}>
         {createSvgIconVNode(
           ICON_PATH_BACK,
           navigationBar.type === 'transparent'
@@ -206,6 +205,18 @@ function createPageHeadSearchInputTsx(
   )
 }
 
+function onPageHeadBackButton() {
+  if (getCurrentPages().length === 1) {
+    uni.reLaunch({
+      url: '/',
+    })
+  } else {
+    ;(uni.navigateBack as Function)({
+      from: 'backbutton',
+    })
+  }
+}
+
 function usePageHead(navigationBar: UniApp.PageNavigationBar) {
   const clazz = computed(() => {
     const { type, titlePenetrate, shadowColorType } = navigationBar

packages/uni-h5/src/framework/plugin/page.ts

@@ -56,7 +56,7 @@ function initPublicPage(route: RouteLocationNormalizedLoaded) {
   return {
     id,
     path: route.path,
-    route: normalizeRoute((route.meta.route as string) || route.path),
+    route: normalizeRoute(route.path),
     fullPath: route.meta.isEntry ? route.meta.pagePath : route.fullPath,
     options: {}, // $route.query
     meta: usePageMeta(),

packages/uni-h5/src/framework/plugin/router.ts

 import { App } from 'vue'
-import {
-  Router,
-  RouterOptions,
-  RouteRecordRaw,
-  NavigationHookAfter,
-  NavigationGuardWithThis,
-} from 'vue-router'
+import { Router, RouterOptions, RouteRecordRaw } from 'vue-router'
 import {
   createRouter,
   createWebHistory,
@@ -31,21 +25,12 @@ function createRouterOptions(): RouterOptions {
   return {
     history: initHistory(),
     strict: !!__uniConfig.router.strict,
-    routes: [
-      { path: __uniRoutes[0].path, redirect: '/' },
-      ...__uniRoutes,
-    ] as RouteRecordRaw[],
+    routes: (__uniRoutes as unknown) as RouteRecordRaw[],
     scrollBehavior,
   }
 }
 
-function initGuard(router: Router) {
-  router.beforeEach(beforeEach)
-  router.afterEach(afterEach)
-}
-
 function createAppRouter(router: Router) {
-  initGuard(router)
   return router
 }
 
@@ -54,22 +39,5 @@ function initHistory() {
     __UNI_FEATURE_ROUTER_MODE__ === 'history'
       ? createWebHistory()
       : createWebHashHistory()
-  // history.listen((_to, from, info) => {
-  //   if (info.direction === 'back') {
-  //     const app = getApp()
-  //     const id = history.state.__id__
-  //     if (app && id) {
-  //       ;(app.$refs.app as any).keepAliveExclude = [from + '-' + id]
-  //     }
-  //   }
-  // })
   return history
 }
-
-const beforeEach: NavigationGuardWithThis<undefined> = (to, from, next) => {
-  next()
-}
-const afterEach: NavigationHookAfter = (to, from, failure) => {
-  console.log('afterEach.id', history.state.__id__)
-  console.log('afterEach', to, from, failure, JSON.stringify(history.state))
-}

packages/uni-h5/src/service/api/route/navigateTo.ts

-import { isNavigationFailure, Router } from 'vue-router'
 import {
   API_NAVIGATE_TO,
   defineAsyncApi,
   NavigateToOptions,
   NavigateToProtocol,
 } from '@dcloudio/uni-api'
-import { createPageState } from '../../../framework/plugin/page'
+import { navigate } from './utils'
 
 export const navigateTo = defineAsyncApi<typeof uni.navigateTo>(
   API_NAVIGATE_TO,
-  (options, callback?: Function) => {
-    const router = getApp().$router as Router
-    router
-      .push({
-        path: options.url,
-        force: true,
-        state: createPageState('navigateTo'),
-      })
-      .then((failure) => {
-        if (isNavigationFailure(failure)) {
-          return callback!({
-            errMsg: `${API_NAVIGATE_TO}:fail ${failure.message}`,
-          })
-        }
-        callback!()
-      })
-  },
+  (options, callback?: Function) =>
+    navigate(API_NAVIGATE_TO, options.url, callback!),
   NavigateToProtocol,
   NavigateToOptions
 )

packages/uni-h5/src/service/api/route/reLaunch.ts

@@ -4,10 +4,12 @@ import {
   ReLaunchOptions,
   ReLaunchProtocol,
 } from '@dcloudio/uni-api'
+import { navigate } from './utils'
 
-export const reLaunch = defineAsyncApi(
+export const reLaunch = defineAsyncApi<typeof uni.reLaunch>(
   API_RE_LAUNCH,
-  () => {},
+  (options, callback?: Function) =>
+    navigate(API_RE_LAUNCH, options.url, callback!),
   ReLaunchProtocol,
   ReLaunchOptions
 )

packages/uni-h5/src/service/api/route/redirectTo.ts

@@ -4,10 +4,12 @@ import {
   RedirectToOptions,
   RedirectToProtocol,
 } from '@dcloudio/uni-api'
+import { navigate } from './utils'
 
-export const redirectTo = defineAsyncApi(
+export const redirectTo = defineAsyncApi<typeof uni.redirectTo>(
   API_REDIRECT_TO,
-  () => {},
+  (options, callback?: Function) =>
+    navigate(API_REDIRECT_TO, options.url, callback!),
   RedirectToProtocol,
   RedirectToOptions
 )

packages/uni-h5/src/service/api/route/switchTab.ts

@@ -4,10 +4,12 @@ import {
   SwitchTabOptions,
   SwitchTabProtocol,
 } from '@dcloudio/uni-api'
+import { navigate } from './utils'
 
-export const switchTab = defineAsyncApi(
+export const switchTab = defineAsyncApi<typeof uni.switchTab>(
   API_SWITCH_TAB,
-  () => {},
+  (options, callback?: Function) =>
+    navigate(API_SWITCH_TAB, options.url, callback!),
   SwitchTabProtocol,
   SwitchTabOptions
 )

packages/uni-h5/src/service/api/route/utils.ts

+import { isNavigationFailure, Router } from 'vue-router'
+import { createPageState } from '../../../framework/plugin/page'
+
+export function navigate(
+  type: 'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab',
+  url: string,
+  callback: Function
+) {
+  const router = getApp().$router as Router
+  router[type === 'navigateTo' ? 'push' : 'replace']({
+    path: url,
+    force: true,
+    state: createPageState(type),
+  }).then((failure) => {
+    if (isNavigationFailure(failure)) {
+      return callback({
+        errMsg: `:fail ${failure.message}`,
+      })
+    }
+    callback()
+  })
+}

packages/vite-plugin-uni/src/configResolved/plugins/pagesJson.ts

@@ -170,8 +170,10 @@ function normalizePagesRoute(pagesJson: UniApp.PagesJson): PageRouteOptions[] {
 }
 
 function generatePageRoute({ name, path, meta }: PageRouteOptions) {
+  const { isEntry } = meta
+  const alias = isEntry ? `\n  alias:'/${path}',` : ''
   return `{
-  path:'/${meta.isEntry ? '' : path}',
+  path:'/${isEntry ? '' : path}',${alias}
   component:{
     render() {
       return (openBlock(), createBlock(PageComponent, null, {page: withCtx(() => [createVNode(${name})]), _: 1 /* STABLE */}))
@@ -187,7 +189,6 @@ function generatePagesRoute(pagesRouteOptions: PageRouteOptions[]) {
 
 function generateRoutes(pagesJson: UniApp.PagesJson) {
   return `window.__uniRoutes=[${[
-    `{ path: '/${pagesJson.pages[0].path}', redirect: '/' }`,
     ...generatePagesRoute(normalizePagesRoute(pagesJson)),
   ].join(',')}]`
 }